Comment on page
Usage In Passage Elements
Add a custom token store directly into the Passage elements.
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} />
</>
);
};
Last modified 2mo ago