Build a custom multi-session flow
A multi-session application is an application that allows multiple accounts to be signed in from the same browser at the same time. The user can switch from one account to another seamlessly. Each account is independent from the rest and has access to different resources.
This guide provides you with the necessary information to build a custom multi-session flow using the Clerk API.
To implement the multi-session feature to your application, you need to handle the following scenarios:
- Switching between different accounts
- Adding new accounts
- Signing out from one account, while remaining signed in to the rest
- Signing out from all accounts
Enable multi-session in your application
To enable multi-session in your application, you need to configure it in the Clerk Dashboard.
- In the Clerk Dashboard, navigate to the Sessions page.
- Toggle on Multi-session handling.
- Select Save changes.
Get the session and user
// Get the session and user
const { session, user } = useClerk()// Get the session
const currentSession = window.Clerk.session
// Get the user
const currentUser = window.Clerk.user// Get the current session
var currentSession: Session? { clerk.session }
// Get the current user
var currentUser: User? { clerk.user }Examples for this SDK aren't available yet. For now, try switching to a supported SDK, such as Next.js, and converting the code to fit your SDK.
const { client, setActive } = useClerk()
// You can get all the available sessions through the client
const availableSessions = client.sessions
const currentSession = availableSessions[0].id
// Use setActive() to set the session as active
await setActive({
session: currentSession.id,
navigate: async ({ session }) => {
if (session?.currentTask) {
// Handle pending session tasks
// See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
console.log(session?.currentTask)
return
}
router.push('/')
},
})// You can get all the available sessions through the client
const availableSessions = window.Clerk.client.sessions
// Use setActive() to set the session as active
await window.Clerk.setActive({
session: availableSessions[0].id,
navigate: async ({ session }) => {
if (session?.currentTask) {
// Handle pending session tasks
// See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
console.log(session?.currentTask)
return
}
router.push('/')
},
})// You can get all the available sessions through the client.
var availableSessions: [Session] { clerk.auth.sessions }
// Use setActive() to set the session as active.
try await clerk.auth.setActive(sessionId: availableSessions[0].id)Examples for this SDK aren't available yet. For now, try switching to a supported SDK, such as Next.js, and converting the code to fit your SDK.
Add a new session
To add a new session, simply link to your existing sign-in flow. New sign-ins will automatically add to the list of available sessions on the client. To create a sign-in flow, see one of the following popular guides:
Sign out all sessions
Use signOut() to deactivate all sessions on the current client.
const { signOut, session } = useClerk()
// Use signOut to sign-out all active sessions
await signOut()// Use signOut to sign-out all active sessions
await window.Clerk.signOut()// Use signOut to sign-out all active sessions
try await clerk.auth.signOut()Examples for this SDK aren't available yet. For now, try switching to a supported SDK, such as Next.js, and converting the code to fit your SDK.
Sign out active session
Use signOut() to deactivate a specific session by passing the session ID.
// Get the signOut method and the active session
const { signOut, session } = useClerk()
// Use signOut to sign-out the active session
await signOut(session.id)// Get the current session
const currentSession = window.Clerk.session
// Use signOut to sign-out the active session
await window.Clerk.signOut(currentSession.id)// Use signOut to sign-out a specific session
try await clerk.auth.signOut(sessionId: session.id)Examples for this SDK aren't available yet. For now, try switching to a supported SDK, such as Next.js, and converting the code to fit your SDK.
Feedback
Last updated on