Which UI do you use?
Custom UI
Pre built UI
Handle Event Hook
This function is called for various user actions. It can be used for logging, analytics or any side effect purposes (these are essentially fire and forget events).
- ReactJS
- Angular
- Vue
Important
SuperTokens does not provide non-React UI components. So we will be using the
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.import Session from "supertokens-auth-react/recipe/session";
Session.init({
onHandleEvent: (context) => {
if (context.action === "SIGN_OUT") {
// called when the user clicks on sign out
} else if (context.action === "REFRESH_SESSION") {
// called with refreshing a session
// NOTE: This is an undeterministic event
} else if (context.action === "UNAUTHORISED") {
// called when the user doesn't have a valid session but made a request that requires one
// NOTE: This event can fire multiple times
if (context.sessionExpiredOrRevoked) {
// the sessionExpiredOrRevoked property is set to true if the current call cleared the session from storage
// this happens only once, even if multiple tabs sharing the same session are open, making it useful for analytics purposes
}
} else if (context.action === "SESSION_CREATED") {
// Called when session is created - post login / sign up.
} else if (context.action === "ACCESS_TOKEN_PAYLOAD_UPDATED") {
// This is called when the access token payload has been updated
}
}
})
Important
SuperTokens does not provide non-React UI components. So we will be using the
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.import Session from "supertokens-auth-react/recipe/session";
Session.init({
onHandleEvent: (context) => {
if (context.action === "SIGN_OUT") {
// called when the user clicks on sign out
} else if (context.action === "REFRESH_SESSION") {
// called with refreshing a session
// NOTE: This is an undeterministic event
} else if (context.action === "UNAUTHORISED") {
// called when the user doesn't have a valid session but made a request that requires one
// NOTE: This event can fire multiple times
if (context.sessionExpiredOrRevoked) {
// the sessionExpiredOrRevoked property is set to true if the current call cleared the session from storage
// this happens only once, even if multiple tabs sharing the same session are open, making it useful for analytics purposes
}
} else if (context.action === "SESSION_CREATED") {
// Called when session is created - post login / sign up.
} else if (context.action === "ACCESS_TOKEN_PAYLOAD_UPDATED") {
// This is called when the access token payload has been updated
}
}
})
import Session from "supertokens-auth-react/recipe/session";
Session.init({
onHandleEvent: (context) => {
if (context.action === "SIGN_OUT") {
// called when the user clicks on sign out
} else if (context.action === "REFRESH_SESSION") {
// called with refreshing a session
// NOTE: This is an undeterministic event
} else if (context.action === "UNAUTHORISED") {
// called when the user doesn't have a valid session but made a request that requires one
// NOTE: This event can fire multiple times
if (context.sessionExpiredOrRevoked) {
// the sessionExpiredOrRevoked property is set to true if the current call cleared the session from storage
// this happens only once, even if multiple tabs sharing the same session are open, making it useful for analytics purposes
}
} else if (context.action === "SESSION_CREATED") {
// Called when session is created - post login / sign up.
} else if (context.action === "ACCESS_TOKEN_PAYLOAD_UPDATED") {
// This is called when the access token payload has been updated
}
}
})