Add Auth Endpoints

To implement login and logout flows with Wristband, you'll need to use the Wristband SDK to create three endpoints in your application: the Login Endpoint, the Callback Endpoint, and the Logout Endpoint.

Login Endpoint

The Login Endpoint is responsible for initiating login requests to Wristband. The code within the Login Endpoint constructs the Wristband authorization request. Then your code will redirect to Wristband's Authorize Endpoint. After redirecting to Wristband's Authorize Endpoint, the user will then land on Wristband's hosted login page; there, they can complete the login process.

The URL of your Login Endpoint must match the login URL you configured when you created your Wristband Application. It must also match the loginUrl value of your SDK configuration.

// app.ts

import { CallbackResultType } from '@wristband/express-auth';
import wristbandAuth from './wristband-auth';

...

// Login Endpoint - The path can be any value you prefer, but it must match 
// your Wristband application's configured login URL path and the SDK loginUrl path.
app.get('/auth/login', async (req, res, next) => {
  try {
    // Call the Wristband login() method which will generate the login URL that should
    // be used to redirect to Wristband's hosted login page.
    const loginUrl = await wristbandAuth.login(req, res);
    res.redirect(loginUrl);
  } catch (err) {
    console.error(err);
    next(err);
  }
});

...

For more details about the Login Endpoint implementation, review our Login Endpoint documentation.

Callback Endpoint

After a user authenticates, Wristband will redirect back to your application's Callback Endpoint. The Callback Endpoint should then verify that the user successfully authenticated. If the user has successfully authenticated, you can retrieve their tokens and claims before redirecting back to your application's home page or an explicit return URL.

The URL of your Callback Endpoint must match the callback URL you configured when you created your Wristband OAuth2 Client. It must also match the redirectUri value of your SDK configuration

// app.ts

...

// Callback Endpoint - The path can be any value you prefer, but it must match 
// the path of your OAuth2 Client callback URL and the SDK redirectUri path.
app.get('/auth/callback', async (req, res, next) => {
  try {
    // Call the Wristband callback() method to check if the user
    // successfully authenticated.  If the user did authenticate successfully, 
    // the user's tokens and claims can be retrieved from the callbackResult.
    const callbackResult = await wristbandAuth.callback(req, res);
    const { callbackData, redirectUrl, type } = callbackResult;

    
    // For some edge cases, such as if an invalid grant was passed to the token API,
    // the SDK will return a redirect URL. Your code should redirect to it in order to
    // restart the login flow.
    if (type === CallbackResultType.REDIRECT_REQUIRED) {
      return res.redirect(redirectUrl);
    }
    
    //
    // Typically, this is where you would create your session and add CSRF handling,
    // however, we'll ignore those topics for now, as they will be covered in more
    // detail later in this guide. 
    //

    // Once the Callback Endpoint has completed,  we redirect to your app's
    // default return URL (typically your app's home page) or to an explicit
    // return URL, if one was specified in the original login request.
    return res.redirect(callbackData.returnUrl || '<replace_with_a_default_return_url>');
  } catch (err) {
    console.error(err);
    return next(err);
  }
});

...

For more details about the Callback Endpoint implementation, review our Callback Endpoint documentation.

Logout Endpoint

The Logout Endpoint is responsible for cleaning up any session data and tokens associated with your authenticated user. Your Logout Endpoint path can be any value you want.

// app.ts

...

// Logout endpoint
app.get('/auth/logout', async (req, res, next) => {
  try {
    //
    // Typically, this is where you would delete state such as session and CSRF
    // cookies. However, we'll ignore those topics for now, as they will be 
    // covered in more detail later in this guide. 
    //
    
    // Call the Wristband logout() function and use the returned URL to redirect
    // to Wristband's Logout Endpoint.  This will delete Wristband's session 
    // that is associated to the authenticated user.  When Wristband is done
    // logging out the user it will redirect back to your application's login 
    // URL or to the explicitly provided redirect URL.
    const logoutUrl = await wristbandAuth.logout(req, res);
    return res.redirect(logoutUrl);
  } catch (err) {
    console.error(err);
    return next(err);
  }
});

...

For more details about the Logout Endpoint implementation, review our Logout Endpoint documentation.