Login

This walkthrough configures ThunderID for sign-in and walks you through integrating it into your application. By the end, a user who clicks your sign-in button is authenticated by ThunderID and lands back in your app with an access token.

Background

Add Login to Your Application covers the requirements story behind this use case.

Pick Your Pattern

Redirect-based

In the redirect-based pattern, your app redirects the user to ThunderID for the sign-in experience, and ThunderID returns them to your app with tokens. Your app never handles credentials.

Configure ThunderID

1. Allow your app origin

Add your app's origin to cors.allowed_origins in repository/conf/deployment.yaml. Leave any existing entries in place.

cors:
  allowed_origins:
    # ...existing entries...
    - "http://localhost:5173"   # replace with your app's origin

Restart ThunderID after the change.

2. Register your application

Navigate to Applications → Add Application and choose Browser App. Configure:

Setting	Value
Redirect URI	Your app's callback URL (e.g., http://localhost:5173)
Allowed grants	authorization_code
PKCE	Required
Allowed user types	Your consumer user type

Copy the Client ID — your SDK configuration needs it.

See Register an Application and Manage Applications.

3. Build a sign-in flow and attach it

Create a sign-in flow in the Flow Designer and assign it to your application.

See Build a Sign-In Flow.

4. Create a test user

Navigate to Users → Add User. Select your consumer user type and fill in the attributes.

See Manage Users.

Integrate into Your App

Your app initiates the redirect and handles the callback. Use the SDK for your framework:

Framework	Where to integrate
React	React Quickstart — <SignInButton />, <SignedIn />, <SignedOut />
Next.js	Next.js Quickstart
Vue	Vue Quickstart
Browser SDK	Browser SDK Overview

Using a different SDK?

The redirect-based pattern is standard OAuth 2.0 authorization code flow with PKCE, so any OIDC-compliant SDK works — you are not limited to the ThunderID SDK. Point it at your ThunderID server's discovery endpoint (http://localhost:8080/oauth2/token/.well-known/openid-configuration) and use your Client ID from the registered application.

Try It Out

1. Start your app and open it in the browser.
2. Click your sign-in button. The browser navigates to ThunderID.
3. Sign in with your test user's credentials.
4. ThunderID runs the sign-in flow and redirects back to your app.
5. Verify that your app receives the tokens and the user is signed in.

App-native step-by-step

Coming soon. See the App-native pattern for what to expect.

App-native managed

Coming soon. See the App-native pattern for what to expect.

Direct API

Coming soon. See the Direct API pattern for what to expect.

Going Deeper

• Curious how access tokens get their permissions? See Resources and Permissions and Roles in Identity Concepts.
• Want to see this use case running against the Wayfinder sample? See Login — Try It Out.