Authentication - Single Page App

A high-level overview of how authentication works with a single page app.

Login

Steps:

  1. The user clicks the Login button on your website or application.
  2. The user is sent to the Login Route implemented in your SPA.
  3. The SPA creates an Authorization Request and redirects the user to the Wristband Authorize Endpoint.
  4. Wristband validates and records the Authorization Request and redirects the user to the Wristband-hosted Login page.
  5. The user provides their credentials to authenticate.
  6. The Login Page redirects to your SPA's Callback Route with an authorization code.
  7. The Callback function calls Wristband's Token Endpoint to exchange the authorization code for an access token.
  8. The Callback function stores the access token and refresh token locally in the browser.
  9. The user is redirected to your SPA's entry point.

Magic Link Login Flow


Logout

Steps:

  1. The user clicks the Logout button within your SPA.
  2. The SPA invokes a logout() function, destroying the session and tokens stored locally in the browser.
  3. The SPA calls the Revoke Token Endpoint to revoke the refresh token.
  4. The user is redirected to the Wristband Logout Endpoint.
  5. Wristband destroys the authentication session and redirects the user to your SPA's Login route.

SPA Logout Flow