Setup Auth service

The first step in setting up authentication involves configuring the Identity Provider (IdP) details within the auth.cue file. This configuration is crucial for establishing a secure authentication mechanism that allows your app to verify user identities.

Tutorial steps

  1. Set up your IdP
  2. Create Users
  3. Apply the change using tailorctl
  4. Log in to the app

1. Set up your IdP

Follow the instructions in setting up auth tutorial to set up IdP configuration for OIDC.

After configuring the Identity Provider (IdP), register it with the auth service by updating the following key authentication parameters: ClientID, ClientSecret, and ProviderURL.

<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)">&amp;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">pm-auth</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">			Config: auth.#OIDC </span><span style="color: var(--shiki-token-keyword)">&amp;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">&lt;oidc-client-id&gt;</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">				ClientSecret: secretmanager.#SecretValue </span><span style="color: var(--shiki-token-keyword)">&amp;</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)">					VaultName: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">&lt;vault-name&gt;</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">					SecretKey: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">&lt;client-secret-key&gt;</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">https://YOUR-AUTH0-DOMAIN.us.auth0.com</span><span style="color: var(--shiki-color-text)">&quot;</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>

2. Create users

To log in to the app, first create users by following the steps outlined in the Create Users in Your Application tutorial.

After creating users, configure the OAuth 2.0 client credentials and specify the authorized redirect URL to complete the authentication setup.

<span><span style="color: var(--shiki-color-text)">auth.#Spec </span><span style="color: var(--shiki-token-keyword)">&amp;</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)">&amp;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">pm-auth</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">			Config: auth.#OIDC </span><span style="color: var(--shiki-token-keyword)">&amp;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">&lt;oidc-client-id&gt;</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">				ClientSecret: secretmanager.#SecretValue </span><span style="color: var(--shiki-token-keyword)">&amp;</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)">					VaultName: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">&lt;vault-name&gt;</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">					SecretKey: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">&lt;client-secret-key&gt;</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">https://YOUR-AUTH0-DOMAIN.us.auth0.com</span><span style="color: var(--shiki-color-text)">&quot;</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)">	OAuth2Clients: [</span></span>
<span><span style="color: var(--shiki-color-text)">	auth.#OAuth2Client </span><span style="color: var(--shiki-token-keyword)">&amp;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">oauth2-client</span><span style="color: var(--shiki-color-text)">&quot;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">authorization_code</span><span style="color: var(--shiki-color-text)">&quot;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">refresh_token</span><span style="color: var(--shiki-color-text)">&quot;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">http://tailorctl.tailor.tech:8086/callback</span><span style="color: var(--shiki-color-text)">&quot;</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)">&quot;</span><span style="color: var(--shiki-token-string-expression)">https://YOUR-APP-DOMAIN.erp.dev/oauth2/callback</span><span style="color: var(--shiki-color-text)">&quot;</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)">}</span></span>
<span></span>

The Redirect URL varies depending on the client application type:

  1. For tailorctl, the Redirect URL is http://tailorctl.tailor.tech:8086/callback. This URL specifies where users will be redirected after initial authentication with the Identity Provider (IdP).

  2. In a Next.js application, the Redirect URL follows a standard pattern: https://YOUR-APP-DOMAIN/oauth2/callback. Replace 'YOUR-APP-DOMAIN' with your actual application's domain.

3. 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>

4. Log in to the app

Run the following command to login to the app.

<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>