Skip to main content

When a user authenticates through Passport, there are two "sessions" you need to account for. The Passport session layer maintains a session between the user and Passport in auth.immutable.com, and the application session layer maintains a session between the user and your application through JWTs.

In order to log out a user from your application and Passport, you can use the logout function on the Passport instance.

Depending on the logout mode you specify, the user will be redirected to the Passport auth domain or silently logged out within your application. You can specify the logout mode when you initialize the Passport instance by setting the logoutMode to either 'redirect' or 'silent'.

// 1. Initialise Passport and set the preferred logout mode
import { passport } from '@imtbl/sdk';

const passportInstance = new passport.Passport({
  logoutRedirectUri: 'http://localhost:3000',
  logoutMode: 'redirect',
  // ...
});

// 2. authenticate user
// ... refer to the "Enable user login" page for more information

// 3. Log the user out
await passportInstance.logout();
info

Both the logoutMode & logoutRedirectUri properties are optional. If the logoutMode is not specified, Passport will default to the redirect logout mode. If the logoutRedirectUri property is not specified, Passport will default to the first logout redirect URI that your Passport client has configured client in the Immutable Developer Hub.

Logout modes​

Redirect mode​

The simplest approach is to use the 'redirect' logout mode, which works as follows:

  1. The application session is cleared by removing the JWT from the browser's local storage
  2. The user is redirected to the Passport auth domain, where the Passport session is cleared
  3. The user is redirected back to the specified logoutRedirectUri

Silent mode​

Alternatively, you can use the 'silent' logout mode which is less intrusive and does not require a top-level redirect. However, in order to use this mode, you must set up a callback URL that invokes the logoutSilentCallback function:

// Assume your application is hosted in http://localhost:3000
// 1. Initialise Passport and set the preferred logout mode
const pasport = new Passport({
  logoutRedirectUri: 'http://localhost:3000/silent-logout',
  logoutMode: 'silent',
  // ...
});

// 2. authenticate user
// ... refer to the "Enable user login" page for more information

// 3. Log the user out
await passport.logout();

// 4. Route handler for /silent-logout
await passport.logoutSilentCallback('http://localhost:3000');

The logoutSilentCallback function accepts a single parameter, which is the URL of the page that initiated the logout. In other words, if you initiate the logout from http://localhost:3000, then you should pass http://localhost:3000.

The 'silent' logout mode works as follows:

  1. The application session is cleared by removing the JWT from the browser's local storage
  2. A hidden iframe is created with the Immutable auth domain's logout URL where the Passport session is cleared
  3. The iframe is redirected to the specified logoutRedirectUri
  4. Your application handles the logoutRedirectUri request and invokes the logoutSilentCallback function. This causes the iframe to emit an event to the parent window which completes the logout flow.
  5. The hidden iframe is removed