Add Auth Routes

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

Login Endpoint

The Login Endpoint is responsible for initiating login requests to Wristband. Your Login Endpoint URL 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 './wristband-auth';

...

// Login endpoint
app.get('/auth/login', async (req, res, next) => {
  try {
    // Call the Wristband login() method which will redirect to Wristband's
    // hosted login page.
    return await wristbandAuth.login(req, res);
  } 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. Your Callback Endpoint URL 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
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, result } = callbackResult;

    
    // For some edge cases, such as if an invalid grant was passed to the token API,
    // the SDK will require a redirect to restart the login flow.  The SDK will have
    // already invoked the redirect() function, so we just stop execution by
    // returning.
    if (result === CallbackResultType.REDIRECT_REQUIRED) {
      return;
    }
    
    //
    // 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 home
    // page or to an explicit return URL, if one was specified.
    return res.redirect(callbackData.returnUrl || 'http://localhost:8080/your-react-home-route');
  } catch (err) {
    console.error(err);
    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() method which will 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.
    return await wristbandAuth.logout(req, res);
  } catch (err) {
    console.error(err);
    return next(err);
  }
});

...

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