Fill up Identifier: Ideally, use your API's root URL (e.g., https://myapp.my-company.com/api). However, this is just an identifier, so any unique string works. Copy it, it is your audience (aud claim in the access token's JWT)
Under Access Token Settings: We want to reduce the lifespan of the access token, the 24 hour default is non acceptable for an SPA usecase.
Maximum Access Token Lifetime: 5 minutes (300 seconds), can be even shorter. It only need to be valid for the duration of transit from the frontend to the backend.
Implicit/Hybrid Flow Access Token Lifetime: 5 minutes – required to save settings, even if unused.
Under the Application Access tab: Click on the edit button on the line of the Application we've created in the previous step (ex: My App), Under "User Delegated Access", click the "Grant Access" button.
Click Save
(Optional) Configuring Auto Logout
If you want users to be automatically logged out after a period of inactivity, follow these steps.
When and Why Enable Auto Logout?
For security-critical applications like banking or admin dasboards users should:
Log in on every visit.
Be logged out after inactivity.
This prevents unauthorized access if a user steps away from their device.
For apps like social media or e-comerce shop on the other hand it's best not to enable auto logout.
createOidc({
issuerUri: "auth.my-company.com",
clientId: "DzXSmwQS7oSTQGLbafhrPXYLT0mOMyZD"
extraQueryParams: {
audience: "https://app.my-company.com/api"
},
// Auth0 puts DPoP behind a paywall. Explicitely disable it until you have
// enabled it in the Auth0 dashboard.
disableDPoP: true,
// (Optional) This must be kept in sync with the Idle Session Lifetime value
// configured in the Auth0 dashboard. To ensure correct autoLogout behavior.
idleSessionLifetimeInSeconds: 1800,
// ...
});
src/oidc.ts
bootstrapOidc({
issuerUri: "auth.my-company.com",
clientId: "DzXSmwQS7oSTQGLbafhrPXYLT0mOMyZD"
extraQueryParams: {
audience: "https://app.my-company.com/api"
},
// Auth0 puts DPoP behind a paywall. Explicitely disable it until you have
// enabled it in the Auth0 dashboard.
disableDPoP: true,
// (Optional) This must be kept in sync with the Idle Session Lifetime value
// configured in the Auth0 dashboard. To ensure correct autoLogout behavior.
idleSessionLifetimeInSeconds: 1800,
// ...
});
// In TanStack Start:
.withAccessTokenValidation({
type: "RFC 9068: JSON Web Token (JWT) Profile for OAuth 2.0 Access Tokens",
expectedAudience: () => "https://app.my-company.com/api",
// ...
})
src/app/app.config.ts
Oidc.provide({
issuerUri: "auth.my-company.com",
clientId: "DzXSmwQS7oSTQGLbafhrPXYLT0mOMyZD"
extraQueryParams: {
audience: "https://app.my-company.com/api"
},
// Auth0 puts DPoP behind a paywall. Explicitely disable it until you have
// enabled it in the Auth0 dashboard.
disableDPoP: true,
// (Optional) This must be kept in sync with the Idle Session Lifetime value
// configured in the Auth0 dashboard. To ensure correct autoLogout behavior.
idleSessionLifetimeInSeconds: 1800,
})
