Using OAuth2 to log in to the Tailor PF app
In this tutorial, you will learn how to set up secure user access to your Tailor PF app using OAuth2 authentication.
Prerequisite
- Set up and register your IdP using the tutorials in Setting up IdP for ID Token and Register your IdP.
Tutorial steps
- Configure OAuth2 client in the Auth manifest
- Log in to the app
1. Configure OAuth2 client in the Auth manifest
Add the following code in the Auth manifest to configure an OAuth2 client in the Tailor PF application.
<span><span style="color: var(--shiki-color-text)">OAuth2Clients: [</span></span>
<span><span style="color: var(--shiki-color-text)"> auth.#OAuth2Client </span><span style="color: var(--shiki-token-keyword)">&</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)"> Name: </span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">oauth2-client</span><span style="color: var(--shiki-color-text)">"</span></span>
<span><span style="color: var(--shiki-color-text)"> GrantTypes: [</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">authorization_code</span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">refresh_token</span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> ]</span></span>
<span><span style="color: var(--shiki-color-text)"> RedirectURIs: [</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">http://localhost:3000/__oauth/callback</span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> ]</span></span>
<span><span style="color: var(--shiki-color-text)"> }</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
<span><span style="color: var(--shiki-color-text)">]</span></span>
<span></span>The properties of the client are defined as follows:
Name: The name of the OAuth2 client is set to "oauth2-client".
GrantTypes: An array specifying the grant types that the OAuth2 client will support. In this case, it supports:
authorization_code: Used for standard OAuth2 authorization flows.
refresh_token: Allows the client to obtain a new access token using a refresh token when the original access token expires.
RedirectURIs: Specifies the list of acceptable redirect URIs for the OAuth2 flow. Here, it's configured to redirect to http://localhost:3000/__oauth/callback, which is a route in the Next.js application that handles the OAuth2 callback after the user authorizes the application.
Apply the change using tailorctl
<span><span style="color: var(--shiki-token-function)">tailorctl</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">workspace</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">apply</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">-m</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">./workspace.cue</span></span>
<span></span>2. Log in to your Tailor PF App
Run the following command to access your application
<span><span style="color: var(--shiki-token-function)">tailorctl</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">workspace</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">app</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">login</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">-n</span><span style="color: var(--shiki-color-text)"> ${your-app-name} </span><span style="color: var(--shiki-token-string)">-c</span><span style="color: var(--shiki-color-text)"> ${oauth2client-name}</span></span>
<span></span>You will be redirected to Auth0 to authenticate. Log in with your crendentials.
After successfully logging in, you will receive the access token.
To include the token in GraphQL Playground, navigate to the Headers tab and add the token to the Authorization header.
<span><span style="color: var(--shiki-color-text)">{</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">"Authorization"</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">"Bearer <your_token>"</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>Connecting Tailor PF App and Next.js UI
In this section, you'll learn how to integrate OAuth 2.0 authentication into a sample Next.js application to enable secure login to the Tailor PF app.
1. Get Client credentials
Run the following command to get the client_id and client_secret.
<span><span style="color: var(--shiki-token-function)">tailorctl</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">workspace</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">oauth2client</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">list</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">-a</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)"><</span><span style="color: var(--shiki-token-string)">your-app-nam</span><span style="color: var(--shiki-color-text)">e</span><span style="color: var(--shiki-token-keyword)">></span></span>
<span></span>You will get the following response with the client credentials which is used in the Next.js app for OAuth2 client configuration.
<span><span style="color: var(--shiki-token-function)">+---------------+---------------------------------------------+</span></span>
<span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">NAME</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">oauth2-client</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span></span>
<span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">DESCRIPTION</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span></span>
<span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">GRANT_TYPES</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">authorization_code,refresh_token</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span></span>
<span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">REDIRECT_URIS</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">http://localhost:3000/__oauth/callback</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span></span>
<span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">CLIENT_ID</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)"><</span><span style="color: var(--shiki-token-function)">client_id></span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span></span>
<span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">CLIENT_SECRET</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)"><</span><span style="color: var(--shiki-token-function)">client_secret></span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">|</span></span>
<span><span style="color: var(--shiki-token-function)">+---------------+---------------------------------------------+</span></span>
<span></span>2. Add the callback URL in the application settings
Add https://<your-tailor-pf-app-url>/oauth2/callback to Allowed Callback URLs in the Application URIs section of the Application settings.
3. Next.js app configuration
You can clone the tailor-nextjs-starter Next.js app found here to explore the configuration of an OAuth 2.0 client using the library badgateway/oatuh2-client.
For managing OAuth 2.0 clients, it is recommended to use available libraries. As an example, @badgateway/oauth2-client is used here, but other libraries can also be utilized.
After cloning the repository, create a .env.local file in your project root directory and add the following environment variables:
<span><span style="color: var(--shiki-color-text)">OAUTH_SERVER_URL</span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-token-string)">http://</span><span style="color: var(--shiki-token-keyword)"><</span><span style="color: var(--shiki-token-string)">your-tailor-pf-app-ur</span><span style="color: var(--shiki-color-text)">l</span><span style="color: var(--shiki-token-keyword)">></span><span style="color: var(--shiki-token-string)">/</span></span>
<span><span style="color: var(--shiki-color-text)">OAUTH_CLIENT_ID</span><span style="color: var(--shiki-token-keyword)">=<</span><span style="color: var(--shiki-token-string)">client-i</span><span style="color: var(--shiki-color-text)">d</span><span style="color: var(--shiki-token-keyword)">></span><span style="color: var(--shiki-color-text)"> </span></span>
<span><span style="color: var(--shiki-color-text)">OAUTH_CLIENT_SECRET</span><span style="color: var(--shiki-token-keyword)">=<</span><span style="color: var(--shiki-token-string)">client-secre</span><span style="color: var(--shiki-color-text)">t</span><span style="color: var(--shiki-token-keyword)">></span><span style="color: var(--shiki-color-text)"> </span></span>
<span><span style="color: var(--shiki-color-text)">NEXT_PUBLIC_BASE_URL</span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-token-string)">http://localhost:3000</span></span>
<span></span>Navigate to the application directory and run the following command to install the necessary dependencies.
<span><span style="color: var(--shiki-token-function)">npm</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">i</span></span>
<span></span>Run the following command to start the application.
<span><span style="color: var(--shiki-token-function)">npm</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">run</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">dev</span></span>
<span></span>When you visit http://localhost:3000/ in your browser you should now see the below screen:
Clicking on the Login with OAuth button will redirect to Auth0 for authentication. Log in with your crendentials.
To handle the redirectUri, it is recommended to use Next.js middleware rather than directly specifying a redirection destination. This approach ensures that the ID token from the IdP can be processed securely without exposure.
In this example, the Next.js middleware is configured to handle redirects at /__oauth/callback. You can specify the final redirect destination here.