Search…
Custom Logic with Callbacks
Customize your login and registration behavior
Passage is designed to work out-of-the-box for most applications, but there may be times where you need to customize or add additional login and registration behavior to the authentication workflow. All three Passage elements support a beforeAuth and an onSuccess callback.

BeforeAuth

The beforeAuth callback is executed when the user presses the Login or Register button after entering their email. A common use case for this would be collecting and validating additional user information when the user is registering for the first time.
The beforeAuth callback is set as a property on the element that accepts a function with the following prototype:
1
type BeforeAuthCallback = (email: string) => boolean
Copied!
When the callback is invoked, the user email is provided as a parameter. After doing additional work to validate any other requirements, the callback should return true to continue with the registration/login, or return false to cancel the registration/login.
An example of assigning this callback might look like:
1
const beforeAuth = (email: string) =>{
2
const success = validateAndStoreUserInfo(email)
3
return success
4
}
5
const passageAuth = document.querySelector("passage-auth") as PassageElement
6
passageAuth.beforeAuth = beforeAuth
Copied!
The default behavior for this callback is to do nothing and return true.

OnSuccess

The onSuccess callback is executed when a user is successfully logged in. This allows you to customize the behavior for handling successful authentication. An example of this would be storing the authorization token to be used by your backend code, customizing where users should be redirected after a login, or setting other fields client-side.
The onSuccess callback is set as a property on the element that accepts a function with the following prototype:
1
interface authResult {
2
redirectURL: string;
3
authToken: string;
4
}
5
type OnSuccessCallback = (authResult: authResult) => void
Copied!
If you provide a custom onSuccess callback, the auth token and redirect URL will be provided for use within the callback. The auth token will not be automatically stored for use in your application. Storing the auth token in a cookie, local storage, or memory is recommended since it will be required to authenticate all subsequent requests for a user.
An example onSuccess callback might look like:
1
const onSuccess = (authResult: authResult) =>{
2
localStorage.setItem('psg_auth_token', authResult.authToken)
3
window.location.href = authResult.redirectURL
4
}
5
const passageAuth = document.querySelector("passage-auth") as PassageElement
6
passageAuth.onSuccess = onSuccess
Copied!
The default behavior for this callback is to set the Passage auth token (psg_auth_token) in a cookie and in local storage, then redirect to the app's redirect URL.
​
​
Last modified 1mo ago
Copy link