Add Auth Routes

Authentication routes manage communication between your frontend and backend, connecting to your Wristband OAuth2 client to handle authentication flows.

Once your SDK is installed and configured, we can add the three core auth endpoints in Express.

Login Route

Your Login route path must match the login URL you configured in the Wristband Dashboard when you created your Wristband Application in previous steps. This should also match the loginUrl value of your SDK configuration (e.g. src/app.ts).

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

...

// Login endpoint
app.get('/auth/login', async (req, res, next) => {
  try {
    // Redirect to the Wristband's Authorize endpoint to auth flow via OAuth2/OIDC.
    return await wristbandAuth.login(req, res);
  } catch (err) {
    console.error(err);
    next(err);
  }
});

...

For more details around the /login implementation, review our Login Endpoint documentation.

Callback Route

Your Callback route path must match the callback URL you configured in the Wristband Dashboard when you created your Wristband OAuth2 Client in previous steps. This should also match the redirectUri value of your SDK configuration.

// app.ts

...

// Callback endpoint
app.get('/auth/callback', async (req, res, next) => {
  try {
    const callbackResult = await wristbandAuth.callback(req, res);
    const { callbackData, result } = callbackResult;

    // The SDK will have already invoked the redirect() function, so we just stop execution here.
    // This occurs for some error and edge cases and redirects you back to Login.
    if (result === CallbackResultType.REDIRECT_REQUIRED) {
      return;
    }
    
    //
    // For now, we will wait on adding session and CSRF handling here
    // (that comes later in this guide)...
    //

    // Otherwise, we know that result === CallbackResultType.COMPLETED.
    // From here, we can navigate to your app's home page.
    return res.redirect(callbackData.returnUrl || 'http://localhost:8080/your-react-home-route');
  } catch (err) {
    console.error(err);
    next(err);
  }
});

...

For more details around the /callback implementation, review our Callback Endpoint documentation.

Logout Route

Your Logout route path can be any value you want.

// app.ts

...

// Logout endpoint
app.get('/auth/logout', async (req, res, next) => {
  try {
    //
    // For now, we will wait on adding session and CSRF handling here...
    //
    
    // Redirect to the Wristband's Logout endpoint to destroy Wristband auth session and return to Login.
    return await wristbandAuth.logout(req, res);
  } catch (err) {
    console.error(err);
    return next(err);
  }
});

...

For more details around the /logout implementation, review our Logout Endpoint documentation.

At this point, let's first test your Login endpoint's basic functionality before implementing the whole authentication flow. This initial test will verify correct redirection to both the Tenant Discovery page (App-Level Login) and Tenant-specific Login pages.