Usage In Passage Elements

Add a custom token store directly into the Passage elements.

Example custom token store usage in Passage Elements

Create and pass a custom Token Store to handle storing the auth token in localstorage (opens in a new tab) only, overriding the default client-side auth token handling of storing in both localstorage (opens in a new tab) and cookie (opens in a new tab).

See all required and supported methods ->

HTML

<html>
    <head>
        <title>Your Page Title Here</title>
        ...
    </head>
    <body>
        ...
        <passage-auth app-id="<PASSAGE_APP_ID>"></passage-auth>
        <script src="https://cdn.passage.id/passage-elements/v2.x/passage-elements.js" defer></script>
        <script>
            // Implement Token Store and required methods
            class CustomTokenStore extends Passage.TokenStore {
                async getAuthToken() {
                    const localToken = localStorage.getItem('custom_auth_token');
                    return localToken ?? '';
                }
                async setTokens(authResult) {
                    localStorage.setItem('custom_auth_token', authResult.auth_token);
                    if (authResult.refresh_token) {
                        localStorage.setItem('custom_auth_token', authResult.refresh_token);
                    }
                    return;
                }
                async getRefreshToken() {
                    const refreshToken = localStorage.getItem('custom_refresh_token');
                    return refreshToken ?? undefined;
                }
                async clearTokens() {
                    localStorage.removeItem('custom_auth_token');
                    return;
                }
            }
 
            // Create an instance of the Token Store
            const customTokenStore = new CustomTokenStore();
 
            // Pass the instance of the Token Store as a property on the Passage element
            const passageAuth = document.querySelector('passage-auth');
            passageAuth.tokenStore = customTokenStore;
        </script>
    </body>
</html>

React

import { PassageAuth } from '@passageidentity/passage-react';
import { TokenStore } from '@passageidentity/passage-js';
 
export const PassageAuthElement: React.FC = () => {
    // Implement Token Store and required methods
    class CustomTokenStore extends TokenStore {
        async getAuthToken() {
            const localToken = localStorage.getItem('custom_auth_token');
            return localToken ?? '';
        }
        async setTokens(authResult: string) {
            localStorage.setItem('custom_auth_token', authResult.auth_token);
            if (authResult.refresh_token) {
                localStorage.setItem('custom_auth_token', authResult.refresh_token);
            }
            return;
        }
        async getRefreshToken() {
            const refreshToken = localStorage.getItem('custom_refresh_token');
            return refreshToken ?? undefined;
        }
        async clearTokens() {
            localStorage.removeItem('custom_auth_token');
            return;
        }
    }
 
    // Create an instance of the CustomTokenStore class
    const customTokenStore = new CustomTokenStore();
 
    // Pass the instance in as a prop to the Passage element
    return (
        <>
            <PassageAuth tokenStore={customTokenStore} />
        </>
    );
};