Usage In Passage Elements

Add a custom token store directly into the Passage elements.

Example Custom Token Store Usage in Passage Elements

See all required and supported methods in the tokenStore in Customizing Token Management.

The examples below create and pass a custom Token Store to handle storing the auth token in localstorage only, overriding the default client-side auth token handling of storing in both localstorage and cookie.

<html>
  <head>
    <title>Your Page Title Here</title>
    ...
  </head>
  <body>
    ...
    <passage-auth app-id="<PASSAGE_APP_ID>"></passage-auth>
    <script src="https://psg.so/web.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>

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} />
        </>
    );
};

PreviousCustomizing Token Management NextAndroid

Last updated 7 months ago