🧪 Test Login and Logout Flows

🤔

Tests not working?

If you get stuck, contact us and our development team will work directly with you to get unblocked.

After setting up your React Auth Context, you can test the authentication flow by verifying that login redirects work, sessions persist after page refresh, and logout clears the session state.

1. Verify the Callback Route

First, verify the Express server still correctly redirects to your Wristband test tenant's login page (as tested in the earlier in the Test Redirect to Login step).

Navigate to that Tenant Login Page with your browser's dev tools open to monitor network requests during the these tests.

Actions

1. While on the Tenant Login Page, enter your test user's email and password.
2. Click the "Log In" button.

Verify UI Landing

• Verify that no errors occurred when submitting your credentials on the Tenant Login Page.
• Verify that you land on the home route in your React frontend.

Verify Wristband's Auth Session

The first location Wristband redirects you to after entering your credentials is the Wristband Auth Session endpoint, which creates an Auth Session in Wristband's domain.

• Verify in the network requests that you can see the Set-Cookie header with an sid cookie in the response headers from Wristband's Auth Session endpoint. Also verify that the cookie was stored successfully in the browser.

  

Verify Your Server's Application Session

After your Wristband Auth Session is created, Wristband redirects to your Express server's Callback endpoint to retrieve token and user data as well as create your application's session.

• Verify in the network requests that you can see the Set-Cookie header with a session cookie in the response headers from your Express server's Callback endpoint. Also verify that the cookie was stored successfully in the browser.

  

Verify Login State Cookie Removal

The Wristband SDK will remove the Login State Cookie that was created in your Express server's Login endpoint upon redirecting to your React frontend's home page.

• Verify in the network requests that you can see the Set-Cookie header with a login#<state>#<timestamp_ms> cookie in the response headers. Also verify that the cookie was deleted successfully from the browser.

  

If all those tests succeeded, then your login workflow is working correctly! 🙌

2. Verify the Logout Route

📘

How to Perform Logout

For this test, we'll assume you have implemented a basic Logout button in your React frontend which will redirect to your Express server's Logout endpoint upon click.

Actions

• While still logged into your app, click the Logout button in your React frontend.

Verify UI Landing

• Verify that no errors occurred when clicking the Logout button.
• Verify that you land on the on the Tenant Login Page for your test tenant.

Verify Application Session Cookie Removal

After your Express server's Logout endpoint executes, it will redirect to Wristband's Logout endpoint.

• Verify in the network requests that you can see the Set-Cookie header with a session cookie in the response headers from your Express server's Logout endpoint. Also verify that the cookie was deleted successfully from the browser.

Verify Wristband Auth Session Cookie Removal

After the Wristband Logout endpoint executes, Wristband will redirect back to your Express server's Login endpoint before ultimately landing on the Tenant Login Page.

• Verify in the network requests that you can see the Set-Cookie header with an sid cookie in the response headers from Wristband's Logout endpoint. Also verify that the cookie was deleted successfully from the browser.

• You can also check in the Wristband Dashboard to confirm if the auth session was terminated for the logged-out user:

  1. From the Wristband Dashboard home page, navigate into your Wristband Application.

  2. Select Users from the left navigation menu.

  3. In the Users table, click on the row of your test user.

  4. On that user's settings page, scroll down to the Active Auth Sessions table. Here, you can see if the Wristband Auth Session was deleted from Wristband's backend (which is the source of auth sessions).

     

If all those tests succeeded, then your logout workflow is working correctly! 🙌

3. Verify Redirect to Login When Unauthenticated

Verify that the basic session validation logic in your Session endpoint executes correctly.

Actions

• After logging out, attempt to navigate directly to your React frontend's home page in the browser while still logged out. For example:

http://localhost:3000/your-react-home-route

Verify Login Redirect

• Verify that the network requests show a 401 Unauthorized HTTP response coming from your Express server's Session endpoint.
• Verify in the network requests that the browser redirects you to your Express server's Login endpoint.
• Verify that you land on either the Tenant Discovery Page or the Tenant Login Page of your test tenant (depending on you configured your domains).

If all tests succeeded, then end-to-end user authentication is working as expected! 🎉