Search
K
Links
Comment on page

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.
Example - HTML
Example - React
<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} />
</>
);
};