OpenID Javascript Client
Any openID Javascript compliant client can be integrated with justpass.me. If you are unfamiliar with OpenID Connect, then you should learn the protocol (opens in a new tab) first. This library is designed as a spec-compliant protocol library.
Example Integration with oidc-react
-
install oidc-client-ts (opens in a new tab)
npm install oidc-client-ts
-
Create a simple Home component and add the following block of code:
import React from 'react'; import logo from '../logo.svg'; import { User, UserManager } from 'oidc-client-ts'; interface HomeProps { userManager: UserManager; } const Home: React.FC<HomeProps> = ({ userManager }) => { const [user, setUser] = React.useState<User | null>(null); React.useEffect(() => { userManager.getUser().then((user) => { setUser(user) }).catch(function(err) { console.error(err); }); }, [userManager]); const signinPopupHandler = async () => { try { const user = await userManager.signinPopup(); setUser(user) console.log(user) } catch (err) { console.error(err); } }; const signinRedirectHandler = async () => { try { await userManager.signinRedirect(); } catch (err) { console.error(err); } }; const signOutPopupHandler = async () => { try { await userManager.signoutPopup(); setUser(null) } catch (err) { console.error(err); } }; const signOutRedirectHandler = async () => { try { await userManager.signoutRedirect(); setUser(null) } catch (err) { console.error(err); } }; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> {user ? ( <div> <p>Welcome, {user.profile.preferred_username}!</p> <button onClick={signOutPopupHandler}>Popup Logout</button> <button onClick={signOutRedirectHandler}>Redirect Logout</button> </div> ) : ( <div> <button onClick={signinPopupHandler}>Popup Login</button> <button onClick={signinRedirectHandler}>Redirect Login</button> </div> )} </header> </div> ); }; export default Home;
-
Create simple SignInRedirect.tsx component and add the following block of code:
import React, { useEffect } from 'react'; import { User, UserManager } from 'oidc-client-ts'; import { useNavigate } from 'react-router-dom'; interface SigninRedirectProps { userManager: UserManager; } const SigninRedirect: React.FC<SigninRedirectProps> = ({ userManager }) => { const navigate = useNavigate() const [user, setUser] = React.useState<User | null>(null); useEffect(() => { userManager.signinCallback().then((user) => { console.log("signin popup callback response success"); if (user){ setUser(user) } }).catch(function(err) { console.error(err); }); }, [userManager]); useEffect(()=>{ if (user){ navigate("/") } }, [user, navigate]) return <p>Processing Signin...</p>; }; export default SigninRedirect;
-
Create simple SignoutRedirect.tsx component and add the following block of code:
import React, { useEffect } from 'react'; import { UserManager } from 'oidc-client-ts'; import { useNavigate } from 'react-router-dom'; interface SignOutRedirectProps { userManager: UserManager; } const SignOutRedirect: React.FC<SignOutRedirectProps> = ({ userManager }) => { const navigate = useNavigate() const [signoutDone, setSignoutDone] = React.useState(false); useEffect(() => { userManager.signoutCallback().then(() => { console.log("Signout successful") setSignoutDone(true) }).catch(function(err) { console.error(err); }); }, [userManager]); useEffect(()=>{ if (signoutDone){ setTimeout(()=> navigate("/"), 100); } }, [signoutDone, navigate]) return <p>Processing SignOut...</p>; }; export default SignOutRedirect;
-
Create simple Index component and add the following block of code:
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <App /> </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
-
Get
theAuthorization Endpoint
,client_id
from your app info as shown in the example below.
-
Create your App component and add the following block of code:
import './App.css'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { UserManager } from 'oidc-client-ts'; import SigninRedirect from './pages/SigninRedirect'; import SignoutRedirect from './pages/SignoutRedirect'; import Home from './pages/Home'; import React from 'react'; function App() { const userManager = new UserManager({ authority: "https://example.accounts.justpass.me/openid/", client_id: "678605", redirect_uri: "http://localhost:3000/signin_redirect", popup_redirect_uri: "http://localhost:3000/signin_redirect", popup_post_logout_redirect_uri: "http://localhost:3000/signout_redirect", post_logout_redirect_uri: "http://localhost:3000/signout_redirect", scope: "openid profile" }); return ( <Router> <Routes> <Route path="/" element={<Home userManager={userManager}/>} /> <Route path="/signin_redirect" element={<SigninRedirect userManager={userManager}/>} /> <Route path="/signout_redirect" element={<SignoutRedirect userManager={userManager} />} /> </Routes> </Router> ); } export default App;
-
Add
redirect_uri
,post_logout_redirect_uri
to your app settings as shown in the example below.
- The returned
id_token
is aJWT token
and you can verify and use it by your backend of your application, if you want to read more about using JWT visit jwt.io (opens in a new tab).