Add Auth Endpoints

To implement login and logout flows with Wristband, you'll need to use the Wristband SDK to create the following four endpoints in your Next.js application:

Login Endpoint
Callback Endpoint
Logout Endpoint
Session Endpoint

Login Endpoint

The Login Endpoint initiates login requests to Wristband. It constructs the authorization request and redirects the user to Wristband's Authorize Endpoint. From there, the user is directed to Wristband's hosted login page to complete the login process.

Below is a code snippet showing how to use Wristband's SDK to implement the Login Endpoint.

// src/app/api/auth/login/route.ts

import type { NextRequest } from 'next/server';
import { wristbandAuth } from 'src/wristband';

// Login Endpoint
export async function GET(request: NextRequest) {
  // Call the Wristband login() method which will return a NextResponse with the
  // URL that should be used to redirect to Wristband's hosted login page.
  return await wristbandAuth.appRouter.login(request);
}

Callback Endpoint

After the user successfully authenticates, Wristband redirects to your application's Callback Endpoint. Calling wristbandAuth.appRouter.callback() returns a CallbackResult object containing the user's tokens and claims.

By accessing the request's session object, you can create the user's session by calling session.fromCallback() and then save it with session.saveToResponse().

Below is a code snippet showing how to use Wristband's SDK to implement the Callback Endpoint.

// src/app/api/auth/callback/route.ts

import { NextRequest } from 'next/server';
import { getRequestSession, wristbandAuth } from 'src/wristband';

// Callback Endpoint
export async function GET(request: NextRequest) {
  // 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.appRouter.callback(request);
  const { callbackData, redirectUrl, type } = callbackResult;

  if (type === 'redirect_required') {
    return await wristbandAuth.appRouter.createCallbackResponse(request, redirectUrl);
  }

  // Create a session for the authenticated user. If needed, custom fields can 
  // be stored in the session using the customFields parameter of the 
  // fromCallback() method.
  const session = await getRequestSession(request);
  session.fromCallback(callbackData);

  // Create the response that will send the user back to the application. 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.
  const appUrl = callbackData.returnUrl || '<replace_with_a_default_return_url>';
  const response = await wristbandAuth.appRouter.createCallbackResponse(request, appUrl);
  
  // To complete the Callback Endpoint, save the user's session before redirecting.
  return await session.saveToResponse(response);
}

Logout Endpoint

When a user logs out of your application, you must ensure that all authenticated state associated with the user is cleared. The Logout Endpoint needs to perform three tasks to accomplish this:

Clear the application's local session state.
Revoke any refresh tokens associated with the user.
Redirect to Wristband's Logout Endpoint to terminate the user's Wristband auth session.

Below is a code snippet showing how to use Wristband's SDK to implement the Logout Endpoint.

// src/app/api/auth/logout/route.ts

import type { NextRequest } from 'next/server';
import { getRequestSession, wristbandAuth } from 'src/wristband';

// Logout Endpoint
export async function GET(request: NextRequest) {
  // Get all the necessary session data needed to perform the logout operation.
  const session = await getRequestSession(request);
  const logoutConfig = {
    refreshToken: session.refreshToken,
    tenantName: session.tenantName,
  };

  // Call the Wristband logout() function to get the NextResponse with the URL that
  // 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.
  const response = await wristbandAuth.appRouter.logout(request, logoutConfig);

  // To complete the Callback Endpoint, destroy your application's local
  // session before redirecting.
  return await session.destroyToResponse(response);
}

Session Endpoint

The Session Endpoint verifies that an incoming request contains a valid session and, if so, returns a response that includes the user's session data. This endpoint is used primarily by the frontend for the following two purposes:

To allow the frontend to determine whether the user has a valid session.
To provide the frontend with the user's session data for use within the browser.

Below is a code snippet showing how to use Wristband's SDK to implement the Session Endpoint.

// src/app/api/auth/session/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { getRequestSession } from 'src/wristband';

// Session Endpoint
export async function GET(request: NextRequest) {
  // Call the getSessionResponse() method to extract the user's 
  // session data and populate a SessionResponse. If needed, you can add 
  // additional data to the SessionResponse by using the metadata parameter 
  // of the getSessionResponse() method.
  const session = await getRequestSession(request);
  const sessionResponse = session.getSessionResponse();
  
  // The session response should never be cached by the browser.
  return NextResponse.json(sessionResponse, {
    headers: { 'Cache-Control': 'no-store', Pragma: 'no-cache' }
  });
}

Register Your Login Endpoint and Callback Endpoint With Wristband

For several authentication flows, Wristband will need to redirect to your application's Login Endpoint and Callback Endpoint. Therefore, we need to inform Wristband of the URLs for these two endpoints. To do that, we'll need to update the following two fields within the Wristband dashboard:

Application Login URL
Client Redirect URIs

In the sections below, we'll go over how to update these two fields.

Updating the Application Login URL

To update the Application Login URL, follow these steps.

From the Dashboard Home Page, select the appropriate application.

Next, on the Application Settings page, locate the Login URL field and set its value to the URL of your application's Login Endpoint. When you are finished, click the "Save" button.

Updating the Client Redirect URIs

To update the Client Redirect URIs, follow these steps.

Select "OAuth2 Clients" from the left navigation bar, then select the client whose ID matches the client ID that was registered with the SDK.

On the Edit Client page, navigate to the Redirect URIs section and click the "Add+" button. Then enter the URL of your application's Callback Endpoint. When you are finished, click the "Save" button.