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 the Authorization Endpoint, client_id from your app info as shown in the example below.

Alt text

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.

Alt text

The returned id_token is a JWT 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).

Next.js VanillaJS