Set up your Identity Provider for ID Token login
Auth service works with an identity provider to authenticate users. Before setting up the Auth service, you need to set up an identity provider.
In this tutorial, we'll use Auth0 as an example of an identity provider. We'll generate an ID token to call your App API to get the access token to run queries in the GraphQL playground. If you are using the Auth0 SDK to obtain the ID token, you can follow step 5 in this guide to get the access token. Here, you'll find an alternative method for obtaining the ID token with simple steps, specifically for ID token authentication.
- Complete Quickstart first If you haven't yet built the Inventory-tracker app from our templates.
- See Core concepts to get an overview of Workspace, Organization, Application and Service.
Tutorial steps
- Set up Auth0
- Set up Auth service
- Apply the change using
tailorctl - Get your ID token
- Call your API
1. Set up Auth0
If you don't have an Auth0 account, sign up for a free account at Auth0.
After creating an account, you can locate your application's domain, client ID and client secret in the Application settings.
Add http://tailorctl.tailor.tech:8086/callback to Allowed Callback URLs in the Application URIs section of the settings.
Below are the steps to enable Password Grant exchanges.
- Configure tenant
In the Auth0 dashboard, select Settings from the navigation and locate API Authorization Settings in the General tab.
Scroll down to locate the Default Directory setting and enter Username-Password-Authentication.
- Update
Grant Types
Select your application from the Applications section, then navigate to the Settings tab, and scroll down to find Advanced Settings.
In the Advanced Settings, navigate to the Grant Types tab and check the box next to Password to enable the Password grant type.
Next, copy your Api Identifier by selecting APIs under Applications from the navigation menu.
Now, we are ready to set up the Auth service.
2. Set up Auth service
You can locate auth.cue file in the services/auth directory within your application.
This file contains the configuration for the Auth service.
<span><span style="color: var(--shiki-token-keyword)">package</span><span style="color: var(--shiki-color-text)"> auth</span></span>
<span></span>
<span><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> (</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)">github.com/tailor-platform/tailorctl/schema/v2/auth</span><span style="color: var(--shiki-color-text)">"</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)">tailor.build/template/services/tailordb</span><span style="color: var(--shiki-color-text)">"</span></span>
<span><span style="color: var(--shiki-color-text)"> tailordbType </span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">tailor.build/template/services/tailordb/type</span><span style="color: var(--shiki-color-text)">"</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)">tailor.build/template/environment</span><span style="color: var(--shiki-color-text)">"</span></span>
<span><span style="color: var(--shiki-color-text)">)</span></span>
<span></span>
<span><span style="color: var(--shiki-color-text)">auth.#Spec </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)"> Namespace: environment.#app.namespace</span></span>
<span><span style="color: var(--shiki-color-text)"> IdProviderConfigs: [</span></span>
<span><span style="color: var(--shiki-color-text)"> auth.#IDProviderConfig </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)">inventory-tracker-auth</span><span style="color: var(--shiki-color-text)">"</span></span>
<span><span style="color: var(--shiki-color-text)"> Config: auth.#IDToken </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)"> ClientID: </span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">ulIr9rgHeytUQYSRl9j2WvrwPJn9XaXx</span><span style="color: var(--shiki-color-text)">"</span></span>
<span><span style="color: var(--shiki-color-text)"> ProviderURL: </span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">https://dev-uriukbxe1n5cqxwz.us.auth0.com/</span><span style="color: var(--shiki-color-text)">"</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 style="color: var(--shiki-color-text)"> UserProfileProvider: auth.#UserProfileProviderType.TailorDB</span></span>
<span><span style="color: var(--shiki-color-text)"> UserProfileProviderConfig: auth.#TailorDBProviderConfig </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)"> Namespace: tailordb.Namespace</span></span>
<span><span style="color: var(--shiki-color-text)"> Type: tailordbType.User.Name</span></span>
<span><span style="color: var(--shiki-color-text)"> UsernameField: </span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">email</span><span style="color: var(--shiki-color-text)">"</span></span>
<span><span style="color: var(--shiki-color-text)"> AttributesFields: [</span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-token-string-expression)">userAttributes</span><span style="color: var(--shiki-color-text)">"</span><span style="color: var(--shiki-color-text)">]</span></span>
<span><span style="color: var(--shiki-color-text)"> }</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>Replace the ClientID and ProviderURL with your Auth0 values.
3. Apply the change using tailorctl
Generate new workspace CUE file and apply the Auth changes.
<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>4. Get your ID token
Send the following request by replacing yourDomain, username, password, yourApiIdentifier, yourClientId and yourClientSecret to get the id_token.
curl --request POST \
--url 'https://{yourDomain}/oauth/token' \
--header 'content-type: application/x-www-form-urlencoded' \
--data grant_type=password \
--data 'username={username}' \
--data 'password={password}' \
--data 'audience={yourApiIdentifier}' \
--data scope=openid \
--data 'client_id={yourClientId}' \
--data 'client_secret={yourClientSecret}'
Upon a successful request, you'll receive an HTTP 200 response with a payload containing access_token, refresh_token, id_token, token_type, and expires_in values:
<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-function)">"access_token"</span><span style="color: var(--shiki-token-function)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">"eyJz93a...k4laUWw"</span><span style="color: var(--shiki-token-string)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">"refresh_token"</span><span style="color: var(--shiki-token-function)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">"GEbRxBN...edjnXbL"</span><span style="color: var(--shiki-token-string)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">"id_token"</span><span style="color: var(--shiki-token-function)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">"eyJ0XAi...4faeEoQ"</span><span style="color: var(--shiki-token-string)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">"token_type"</span><span style="color: var(--shiki-token-function)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">"Bearer"</span><span style="color: var(--shiki-token-string)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">"expires_in"</span><span style="color: var(--shiki-token-function)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">36000</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>5. Call your API
Send the following request to your API to get a response with an access token that can be used in the GraphQL playground to run queries.
<span><span style="color: var(--shiki-token-function)">curl</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">--request</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">POST</span><span style="color: var(--shiki-color-text)"> \</span></span>
<span><span style="color: var(--shiki-color-text)">--url </span><span style="color: var(--shiki-token-string)">https://inventory-tracker-lppu2o03uz.erp.dev/auth/token</span><span style="color: var(--shiki-color-text)"> \</span></span>
<span><span style="color: var(--shiki-color-text)">--header </span><span style="color: var(--shiki-token-string-expression)">'content-type: application/x-www-form-urlencoded'</span><span style="color: var(--shiki-color-text)"> \</span></span>
<span><span style="color: var(--shiki-color-text)">--data </span><span style="color: var(--shiki-token-string-expression)">'id_token=eyJ0XAi...4faeEoQ'</span></span>
<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-function)">"access_token"</span><span style="color: var(--shiki-token-function)">:</span><span style="color: var(--shiki-token-function)">"0wxc8b...DQxfFtx"</span><span style="color: var(--shiki-token-function)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">"refresh_token"</span><span style="color: var(--shiki-token-function)">:</span><span style="color: var(--shiki-token-function)">"khScdBQ...p6OmDoY"</span><span style="color: var(--shiki-token-function)">,</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">"expires_in"</span><span style="color: var(--shiki-token-function)">:86400</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>