Passwordless OAuth2 Demo

This project demonstrates how to create an authentication server that uses magic link authentication and OAuth2.

Project details

authentication-service

Includes an authentication server that uses SuperTokens to handle OAuth2 flows and login users through a passwordless method. The project makes use of the override mechanism exposed by the passwordless recipe.

Check the /frontend/src/config.tsx for implementation details. The tl;dr is: the logic keeps track of the OAuth2 flow state in order to be able to complete the authentication attemp after the user opens the magic link.

Complete the authentication flow when the magic link is accessed

The current implementation assumes the following flow:

1. A user initiates a login attempt from a client application
2. User gets redirected to the authentication service frontend
3. User submits their email address and a magic link is sent to them
4. User opens the magic link, on the same device, in a new tab, and they get redirected to the original client, completing the authentication flow.

In this scenario, the original tab, in which the user has initiated the login attempt, has become stale. Since the OAuth2 flow has been completed, returning that tab will show outdated information. We are using the PasswordlessLinkSent_Override logic to change the page once the user returns to the tab in order to display relevant information.

Complete the authentication flow in the original tab

Another option would be to use the original tab to complete the authentication attempt. This mean relying mostly on the PasswordlessLinkSent_Override logic:

1. A user initiates a login attempt from a client application
2. User gets redirected to the authentication service frontend
3. User submits their email address and a magic link is sent to them
4. User opens the magic link, on the same device, in a new tab.
5. The magic link tab informs them that the authentication was successful and tells them to return to the original tab.
6. Upon returning, the tab directs the user to the initial OAuth2 client page by using the component override logic.

In this scenario the consumeCode and setLoginAttemptInfo overrides are not needed since we don't access the OAuth2 state when the magic link gets accessed. The getRedirectionURL function should just send the user to a success page.

client

Includes a react app with an express backend that uses the authentication server for login. The backend uses the passport-oauth2 library to initialize and manage the OAuth2 flow.

How to run

1. Install Dependencies

Install dependencies for all the services:

# Authentication service
cd authentication-service
npm install
cd backend && npm install
cd ../frontend && npm install
cd ../..

# OAuth2 client
cd client/backend && npm install
cd ../frontend && npm install
cd ../..

2. Start the Authentication Service

Replace the <CONNECTION_URI> and <API_KEY> in authentication-service/backend/config.ts based on your SuperTokens environment. Replace the <CLIENT_ID> and <CLIENT_SECRET> in authentication-service/frontend/src/config.tsx based on your previously created OAuth2 client.

cd authentication-service
npm start

This starts both:

• SuperTokens backend at http://localhost:3001
• SuperTokens frontend at http://localhost:3000

3. Start the OAuth2 Client

# Start OAuth2 API server
cd client/backend
npm run dev

Starts the express server on http://localhost:3004

# Start OAuth2 frontend
cd client/frontend
npm run dev

Starts the react app on http://localhost:3003

4. Access the application

1. Navigate to http://localhost:3003 (OAuth2 client frontend)
2. Click "Login with OAuth2" to initiate OAuth flow
3. You'll be redirected to SuperTokens auth server
4. Complete passwordless authentication (magic link via email)
5. After authentication, you'll be redirected back to the client dashboard