Add Login
In this walkthrough, Thor signs in to Wayfinder from his laptop and arrives at the dashboard with his upcoming trips visible. The app receives an access token bound to the wayfinder-booking-api resource server, carrying the three booking permissions attached to his Traveler role.
Complete Setup before starting this walkthrough.
Add Login to Your App covers the requirements story behind this use case.
Pick Your Pattern
Solution Patterns describes three ways to add identity to a consumer app. Each section below walks Thor's sign-in through one pattern.
Redirect-based
In the redirect-based pattern, the consumer app sends the user to ThunderID for the entire sign-in experience and returns them as a signed-in user with tokens attached. The Wayfinder web frontend is configured exactly this way. Selecting Sign in triggers an OIDC redirect, and ThunderID shows the sign-in page. The browser then returns to the app with an authorization code that the app exchanges for tokens.
Try the Use Case
- Open
http://localhost:5173. Wayfinder's home page loads. - Select Sign in. The browser navigates to ThunderID.
- Sign in as Thor. ThunderID runs the authentication flow and grant Thor's
booking:*permissions into the access token. - The browser returns to Wayfinder, the dashboard loads, and Thor's bookings render because the Wayfinder API accepted the token's
booking:readpermission.
Try a Variant
- Add Google as a sign-in option on the flow and verify that a Sign in with Google button appears on the ThunderID page.
- Restrict the application's allowed scopes so the token only carries
booking:read. Attempt a booking and confirm the API rejects it.
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.
