mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 10:25:06 +03:00
## What kind of change does this PR introduce? Docs update. Aligns documentation and style guides with the **Sign in / Sign out / Sign up** platform standard. Closes DOCS-1328. Related to [#49874](https://github.com/supabase/supabase/pull/49874). ## What is the current behavior? Docs style guides prefer _login_ / _log in_. Guide prose uses mixed login and sign in wording. ## What is the new behavior? - [WORD_LIST.md](apps/docs/WORD_LIST.md) and [copywriting.mdx](apps/design-system/content/docs/copywriting.mdx) document the sign in standard - Design-system auth examples updated - Guide prose and API reference spec descriptions updated ### Terminology **Standard:** Use _sign in_, _sign out_, and _sign up_ as verbs. Use _sign-in_, _sign-out_, and _sign-up_ as nouns and adjectives. Match Studio UI labels (**Sign in**, **Sign out**, **Sign up**). **Preserved intentionally:** | Category | Keep as-is | Example | | -------- | ---------- | ------- | | Feature name | social login | `/social-login`, `features.mdx` heading, OAuth provider section | | URL slugs | `login` in paths | `/phone-login`, `/login-flows`, `choosing-login-flow` | | CLI | `supabase login` / `supabase logout` | Reference ids `supabase-login` / `supabase-logout`; executable commands unchanged | | SDK methods | `logout()` | Kotlin/Swift method names in API reference titles and examples | | Third-party UI | Provider product labels | Facebook Login, Kakao Login, portal **Login** buttons | | Postgres | Database terminology | login privileges, login credentials, login via role | | Audit/logging | Log prose | "Generates the following **log** in the Postgres Logs" | | Code and routes | Paths and filenames | `app/login/`, `Login.tsx`, `demos/android-login` | | External URLs | Third-party login pages | `dash.cloudflare.com/login`, `console.neon.tech/login`, `vercel.com/login` | | API identifiers | Event and field names | Audit actions `login`/`logout`, `should_logout_user` | ## To test - Run `pnpm lint:mdx` in `apps/docs` - Spot-check `features.mdx`, `social-login.mdx`, and a provider guide (e.g. Facebook, Kakao) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Standardized authentication terminology across guides, reference material, CLI documentation, and copywriting guidance using “sign in,” “sign out,” and “sign up.” * Updated authentication instructions, headings, link text, examples, and SSO guidance for clearer, more consistent wording. * Corrected related grammar, spelling, hyphenation, and documentation links while preserving established product names and implementation commands. * **Style** * Refined code examples with consistent import ordering and spacing. * **Examples** * Updated authentication button and menu labels to “Sign in” and “Sign out.” <!-- end of auto-generated comment: release notes by coderabbit.ai -->
166 lines
5.0 KiB
Plaintext
166 lines
5.0 KiB
Plaintext
---
|
|
id: 'auth-third-party-auth0'
|
|
title: 'Auth0'
|
|
subtitle: 'Use Auth0 with your Supabase project'
|
|
---
|
|
|
|
Auth0 can be used as a third-party authentication provider alongside Supabase Auth, or standalone, with your Supabase project.
|
|
|
|
## Getting started
|
|
|
|
1. First you need to add an integration to connect your Supabase project with your Auth0 tenant. You will need your tenant ID (and in some cases region ID).
|
|
2. Add a new Third-party Auth integration in your project's [Authentication settings](/dashboard/project/_/auth/third-party).
|
|
3. Assign the `role: 'authenticated'` custom claim to all JWTs by using an Auth0 Action.
|
|
4. Finally setup the Supabase client in your application.
|
|
|
|
## Setup the Supabase client library
|
|
|
|
<Tabs type="underlined" queryGroup="auth0-create-client">
|
|
|
|
<TabPanel id="ts" label="TypeScript">
|
|
|
|
```typescript
|
|
import { createAuth0Client } from '@auth0/auth0-spa-js'
|
|
import { createClient } from '@supabase/supabase-js'
|
|
|
|
const auth0 = await createAuth0Client({
|
|
domain: '<AUTH0_DOMAIN>',
|
|
clientId: '<AUTH0_CLIENT_ID>',
|
|
authorizationParams: {
|
|
redirect_uri: '<MY_CALLBACK_URL>',
|
|
},
|
|
})
|
|
|
|
const supabase = createClient(
|
|
'https://<supabase-project>.supabase.co',
|
|
'SUPABASE_PUBLISHABLE_KEY',
|
|
{
|
|
accessToken: async () => {
|
|
// Use the ID token which reliably includes custom claims.
|
|
const idToken = (await auth0.getIdTokenClaims())?.__raw
|
|
if (!idToken) throw new Error('Missing ID token')
|
|
return idToken
|
|
},
|
|
}
|
|
)
|
|
```
|
|
|
|
</TabPanel>
|
|
|
|
<$Show if="sdk:swift">
|
|
|
|
<TabPanel id="swift" label="Swift (iOS)">
|
|
|
|
```swift
|
|
import Auth0
|
|
import Supabase
|
|
|
|
extension CredentialsManager {
|
|
static let shared = Auth0.CredentialsManager(authentication: Auth0.authentication())
|
|
}
|
|
|
|
let supabase = SupabaseClient(
|
|
supabaseURL: URL(string: "https://<supabase-project>.supabase.co")!,
|
|
supabaseKey: "SUPABASE_PUBLISHABLE_KEY",
|
|
options: SupabaseClientOptions(
|
|
auth: SupabaseClientOptions.AuthOptions(
|
|
accessToken: {
|
|
try await CredentialsManager.shared.credentials().idToken
|
|
}
|
|
)
|
|
)
|
|
)
|
|
```
|
|
|
|
</TabPanel>
|
|
</$Show>
|
|
|
|
<$Show if="sdk:dart">
|
|
|
|
<TabPanel id="dart" label="Flutter">
|
|
|
|
```dart
|
|
import 'package:auth0_flutter/auth0_flutter.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:supabase_flutter/supabase_flutter.dart';
|
|
|
|
Future<void> main() async {
|
|
final auth0 = Auth0('AUTH0_DOMAIN', 'AUTH0_CLIENT_ID');
|
|
await Supabase.initialize(
|
|
url: 'https://<supabase-project>.supabase.co',
|
|
publishableKey: 'SUPABASE_PUBLISHABLE_KEY',
|
|
accessToken: () async {
|
|
final credentials = await auth0.credentialsManager.credentials();
|
|
return credentials.idToken;
|
|
},
|
|
);
|
|
runApp(const MyApp());
|
|
}
|
|
```
|
|
|
|
</TabPanel>
|
|
</$Show>
|
|
|
|
<$Show if="sdk:kotlin">
|
|
|
|
<TabPanel id="kotlin" label="Kotlin">
|
|
|
|
```kotlin
|
|
import com.auth0.android.result.Credentials
|
|
|
|
val supabase = createSupabaseClient(
|
|
"https://<supabase-project>.supabase.co",
|
|
"SUPABASE_PUBLISHABLE_KEY"
|
|
) {
|
|
accessToken = {
|
|
val credentials: Credentials = ...; // Get credentials from Auth0
|
|
credentials.idToken
|
|
}
|
|
}
|
|
```
|
|
|
|
</TabPanel>
|
|
</$Show>
|
|
|
|
</Tabs>
|
|
|
|
## Add a new Third-Party Auth integration to your project
|
|
|
|
In the dashboard navigate to your project's [Authentication settings](/dashboard/project/_/auth/third-party) and find the Third-Party Auth section to add a new integration.
|
|
|
|
In the CLI add the following config to your `supabase/config.toml` file:
|
|
|
|
```toml
|
|
[auth.third_party.auth0]
|
|
enabled = true
|
|
tenant = "<id>"
|
|
tenant_region = "<region>" # if your tenant has a region
|
|
```
|
|
|
|
## Use an Auth0 Action to assign the authenticated role
|
|
|
|
Your Supabase project inspects the `role` claim present in all JWTs sent to it, to assign the correct Postgres role when using the Data API, Storage or Realtime authorization.
|
|
|
|
By default, Auth0 JWTs (both access token and ID token) do not contain a `role` claim in them. If you were to send such a JWT to your Supabase project, the `anon` role would be assigned when executing the Postgres query. Most of your app's logic will be accessible by the `authenticated` role.
|
|
|
|
Configure the [`onExecutePostLogin` Auth0 Action](https://auth0.com/docs/secure/tokens/json-web-tokens/create-custom-claims#create-custom-claims) to add the custom claim to **ID tokens**:
|
|
|
|
```javascript
|
|
exports.onExecutePostLogin = async (event, api) => {
|
|
api.idToken.setCustomClaim('role', 'authenticated')
|
|
}
|
|
```
|
|
|
|
<Admonition type="caution">
|
|
|
|
Supabase requires the literal `role` claim key in the JWT. Auth0 [silently strips non-namespaced custom claims from access tokens](https://auth0.com/docs/troubleshoot/product-lifecycle/past-migrations/custom-claims-migration), so `api.accessToken.setCustomClaim('role', 'authenticated')` does not work. Use `api.idToken.setCustomClaim` and pass the ID token to Supabase as shown in the examples above.
|
|
|
|
</Admonition>
|
|
|
|
## Limitations
|
|
|
|
At this time, Auth0 tenants with the following [signing algorithms](https://auth0.com/docs/get-started/applications/signing-algorithms) are not supported:
|
|
|
|
- HS256 (HMAC with SHA-256) -- also known as symmetric JWTs
|
|
- PS256 (RSA-PSS with SHA-256)
|