From b638c4c90f10c961c24792a23df92eccda93a85b Mon Sep 17 00:00:00 2001 From: Anthony Rimet Date: Wed, 7 Aug 2024 21:29:40 +0200 Subject: [PATCH 1/7] Feat(ra-supabase): Handle HashRouter & BrowserRouter --- packages/demo/public/auth-callback/index.html | 140 ++++++++++++++++++ packages/ra-supabase-core/src/authProvider.ts | 51 +++++-- .../ra-supabase-core/src/getSearchString.ts | 10 ++ .../src/useSupabaseAccessToken.ts | 7 +- 4 files changed, 190 insertions(+), 18 deletions(-) create mode 100644 packages/demo/public/auth-callback/index.html create mode 100644 packages/ra-supabase-core/src/getSearchString.ts diff --git a/packages/demo/public/auth-callback/index.html b/packages/demo/public/auth-callback/index.html new file mode 100644 index 0000000..ab2d5f0 --- /dev/null +++ b/packages/demo/public/auth-callback/index.html @@ -0,0 +1,140 @@ + + + + + + + + + Atomic CRM + + + + + +
+
+
Loading...
+
+
+ + + diff --git a/packages/ra-supabase-core/src/authProvider.ts b/packages/ra-supabase-core/src/authProvider.ts index f73c5ff..bcaef4f 100644 --- a/packages/ra-supabase-core/src/authProvider.ts +++ b/packages/ra-supabase-core/src/authProvider.ts @@ -1,5 +1,6 @@ import { Provider, SupabaseClient, User } from '@supabase/supabase-js'; import { AuthProvider, UserIdentity } from 'ra-core'; +import { getSearchString } from './getSearchString'; export const supabaseAuthProvider = ( client: SupabaseClient, @@ -93,9 +94,12 @@ export const supabaseAuthProvider = ( if (type === 'recovery' || type === 'invite') { if (access_token && refresh_token) { return { - redirectTo: `${ - redirectTo ? `${redirectTo}/` : '/' - }set-password?access_token=${access_token}&refresh_token=${refresh_token}&type=${type}`, + redirectTo: () => ({ + pathname: redirectTo + ? `${redirectTo}/set-password` + : '/set-password', + search: `access_token=${access_token}&refresh_token=${refresh_token}&type=${type}`, + }), }; } @@ -108,24 +112,32 @@ export const supabaseAuthProvider = ( }, async checkAuth() { // Users are on the set-password page, nothing to do - if (window.location.pathname === '/set-password') { + if ( + window.location.pathname === '/set-password' || + window.location.hash.includes('#/set-password') + ) { return; } // Users are on the forgot-password page, nothing to do - if (window.location.pathname === '/forgot-password') { + if ( + window.location.pathname === '/forgot-password' || + window.location.hash.includes('#/forgot-password') + ) { return; } const { access_token, refresh_token, type } = getUrlParams(); - // Users have reset their password or have just been invited and must set a new password if (type === 'recovery' || type === 'invite') { if (access_token && refresh_token) { // eslint-disable-next-line no-throw-literal throw { - redirectTo: `${ - redirectTo ? `${redirectTo}/` : '/' - }set-password?access_token=${access_token}&refresh_token=${refresh_token}&type=${type}`, + redirectTo: () => ({ + pathname: redirectTo + ? `${redirectTo}/set-password` + : '/set-password', + search: `access_token=${access_token}&refresh_token=${refresh_token}&type=${type}`, + }), message: false, }; } @@ -145,6 +157,20 @@ export const supabaseAuthProvider = ( return Promise.resolve(); }, async getPermissions() { + if ( + window.location.pathname === '/set-password' || + window.location.hash.includes('#/set-password') + ) { + return; + } + // Users are on the forgot-password page, nothing to do + if ( + window.location.pathname === '/forgot-password' || + window.location.hash.includes('#/forgot-password') + ) { + return; + } + const { data, error } = await client.auth.getUser(); if (error) { throw error; @@ -164,7 +190,6 @@ export const supabaseAuthProvider = ( if (typeof getIdentity === 'function') { authProvider.getIdentity = async () => { const { data } = await client.auth.getUser(); - if (data.user == null) { throw new Error(); } @@ -222,10 +247,8 @@ export type ResetPasswordParams = { }; const getUrlParams = () => { - const urlSearchParams = new URLSearchParams( - window.location.hash.substring(1) - ); - + const searchStr = getSearchString(); + const urlSearchParams = new URLSearchParams(searchStr); const access_token = urlSearchParams.get('access_token'); const refresh_token = urlSearchParams.get('refresh_token'); const type = urlSearchParams.get('type'); diff --git a/packages/ra-supabase-core/src/getSearchString.ts b/packages/ra-supabase-core/src/getSearchString.ts new file mode 100644 index 0000000..f6373db --- /dev/null +++ b/packages/ra-supabase-core/src/getSearchString.ts @@ -0,0 +1,10 @@ +export function getSearchString() { + const search = window.location.search; + const hash = window.location.hash.substring(1); + + return search && search !== '' + ? search + : hash.includes('?') + ? hash.split('?')[1] + : hash; +} diff --git a/packages/ra-supabase-core/src/useSupabaseAccessToken.ts b/packages/ra-supabase-core/src/useSupabaseAccessToken.ts index 553c144..2dcf028 100644 --- a/packages/ra-supabase-core/src/useSupabaseAccessToken.ts +++ b/packages/ra-supabase-core/src/useSupabaseAccessToken.ts @@ -1,5 +1,6 @@ import { useRedirect } from 'ra-core'; import { useEffect } from 'react'; +import { getSearchString } from './getSearchString'; /** * This hook gets the access_token from supabase in the current browser URL and redirects to the specified page (/ by default) if there is none. @@ -34,10 +35,8 @@ export const useSupabaseAccessToken = ({ }: UseSupabaseAccessTokenOptions = {}) => { const redirect = useRedirect(); - const urlSearchParams = new URLSearchParams( - window.location.search.substr(1) - ); - + const searchStr = getSearchString(); + const urlSearchParams = new URLSearchParams(searchStr); const access_token = urlSearchParams.get(parameterName); useEffect(() => { if (access_token == null) { From 40fe3f723997b8dd0fd1a588a2737864eea88cfa Mon Sep 17 00:00:00 2001 From: Anthony Rimet Date: Wed, 7 Aug 2024 22:17:21 +0200 Subject: [PATCH 2/7] Feat(ra-supabase): Update documentation for HashRouter --- .../src/useSupabaseAccessToken.test.tsx | 28 ++++- packages/ra-supabase/README.md | 107 +++++++++++++++--- 2 files changed, 117 insertions(+), 18 deletions(-) diff --git a/packages/ra-supabase-core/src/useSupabaseAccessToken.test.tsx b/packages/ra-supabase-core/src/useSupabaseAccessToken.test.tsx index 5fb814f..8bcef82 100644 --- a/packages/ra-supabase-core/src/useSupabaseAccessToken.test.tsx +++ b/packages/ra-supabase-core/src/useSupabaseAccessToken.test.tsx @@ -7,7 +7,7 @@ import { } from './useSupabaseAccessToken'; // TODO: fix those tests -describe.skip('useSupabaseAccessToken', () => { +describe('useSupabaseAccessToken', () => { const UseSupabaseAccessToken = (props?: UseSupabaseAccessTokenOptions) => { const token = useSupabaseAccessToken(props); @@ -34,6 +34,26 @@ describe.skip('useSupabaseAccessToken', () => { }); }); + test('should return the access token if present in the hash route', async () => { + window.history.pushState( + {}, + 'React Admin', + '/set-password#access_token=bazinga' + ); + + const { queryByText } = render( + + + + + + ); + + await waitFor(() => { + expect(queryByText('bazinga')).not.toBeNull(); + }); + }); + test('should return the access token from the provided key if present in the URL', async () => { window.history.pushState( {}, @@ -54,7 +74,7 @@ describe.skip('useSupabaseAccessToken', () => { }); }); - test('should redirect users if the access token is not present in the URL', async () => { + test.skip('should redirect users if the access token is not present in the URL', async () => { window.history.pushState({}, 'React Admin', '/set-password'); render( @@ -70,7 +90,7 @@ describe.skip('useSupabaseAccessToken', () => { }); }); - test('should redirect users to the provided path if the access token is not present in the URL', async () => { + test.skip('should redirect users to the provided path if the access token is not present in the URL', async () => { window.history.pushState({}, 'React Admin', '/set-password'); render( @@ -86,7 +106,7 @@ describe.skip('useSupabaseAccessToken', () => { }); }); - test('should not redirect users if the access token is not present in the URL and redirectTo is false', async () => { + test.skip('should not redirect users if the access token is not present in the URL and redirectTo is false', async () => { window.history.pushState({}, 'React Admin', '/set-password'); render( diff --git a/packages/ra-supabase/README.md b/packages/ra-supabase/README.md index 10a9aff..7e042c4 100644 --- a/packages/ra-supabase/README.md +++ b/packages/ra-supabase/README.md @@ -18,7 +18,10 @@ npm install ra-supabase // in supabase.js import { createClient } from '@supabase/supabase-js'; -export const supabaseClient = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); +export const supabaseClient = createClient( + 'YOUR_SUPABASE_URL', + 'YOUR_SUPABASE_ANON_KEY' +); // in dataProvider.js import { supabaseDataProvider } from 'ra-supabase'; @@ -27,7 +30,7 @@ import { supabaseClient } from './supabase'; export const dataProvider = supabaseDataProvider({ instanceUrl: 'YOUR_SUPABASE_URL', apiKey: 'YOUR_SUPABASE_ANON_KEY', - supabaseClient + supabaseClient, }); // in authProvider.js @@ -86,6 +89,18 @@ export const MyAdmin = () => ( You must wrap your `` inside a `` as supabase use hash parameters for passing authentication tokens. +### Using Hash Router + +Supabase uses URL hash links for its redirections. This can cause conflicts if you use a HashRouter. For this reason, we recommend using the BrowserRouter. + +If you want to use the HashRouter, you'll need to modify the code. + +1. Create a custom `auth-callback` folder inside your public folder. +2. Create an `index.html` file inside the `auth-callback`. This file will intercept the supabase redirect and rewrite the URL to prevent conflicts with the HashRouter. For example, see `packages/demo/public/auth-callback/index.html`. +3. Remove `BrowserRouter` from your `App.ts` +4. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback/index.html` +5. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback/index.html"` + ## Features ### DataProvider @@ -102,18 +117,14 @@ const postFilters = [ , ]; -export const PostList = () => ( - - ... - -); +export const PostList = () => ...; ``` See the [PostgREST documentation](https://postgrest.org/en/stable/api.html#operators) for a list of supported operators. #### RLS -As users authenticate through supabase, you can leverage [Row Level Security](https://supabase.com/docs/guides/auth/row-level-security). Users identity will be propagated through the dataProvider if you provided the public API (anon) key. Keep in mind that passing the `service_role` key will bypass Row Level Security. This is not recommended. +As users authenticate through supabase, you can leverage [Row Level Security](https://supabase.com/docs/guides/auth/row-level-security). Users identity will be propagated through the dataProvider if you provided the public API (anon) key. Keep in mind that passing the `service_role` key will bypass Row Level Security. This is not recommended. #### Customizing the dataProvider @@ -132,7 +143,7 @@ export const dataProvider = supabaseDataProvider({ ['some_table', ['custom_id']], ['another_table', ['first_column', 'second_column']], ]), - schema: () => localStorage.getItem("schema") || "api", + schema: () => localStorage.getItem('schema') || 'api', }); ``` @@ -172,10 +183,37 @@ export const MyAdmin = () => ( This requires you to configure your supabase instance: +##### Via config.toml + +1. Go to your `config.toml` file +2. In `[auth]` section set `site_url` to your application URL +3. In `[auth]`, add the following URL in the `additional_redirect_urls = [{APPLICATION_URL}}/auth-callback"]` +4. Add an `[auth.email.template.invite]` section with the following option + +``` +[auth.email.template.invite] +subject = "You have been invited" +content_path = "./supabase/templates/invite.html" +``` + +In `invite.html` set the `auth-callback` redirection + +```HTML + + +

You have been invited

+

You have been invited to create a user on {{ .SiteURL }}. Follow this link to accept the invite:

+

Accept the invite

+ + +``` + +##### Via Dashboard + 1. Go to your dashboard **Authentication** section 1. In **URL Configuration**, set **Site URL** to your application URL 1. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback` -1. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback"` +1. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback"` You can now add the `/set-password` custom route: @@ -207,16 +245,44 @@ export const MyAdmin = () => ( ); ``` +For HashRouter see [Using Hash Router](#using-hash-router). + ### Password Reset When Forgotten If users forgot their password, they can request for a reset if you add the `/forgot-password` custom route. You should also set up the [`/set-password` custom route](#invitation-handling) to allow them to choose their new password. This requires you to configure your supabase instance: +##### Via config.toml + +1. Go to your `config.toml` file +2. In `[auth]` section set `site_url` to your application URL +3. In `[auth]`, add the following URL in the `additional_redirect_urls = [{APPLICATION_URL}}/auth-callback"]` +4. Add an `[auth.email.template.recovery]` section with the following option + +``` +[auth.email.template.recovery] +subject = "Reset Password" +content_path = "./supabase/templates/recovery.html" +``` + +In `recovery.html` set the `auth-callback` redirection + +```HTML + + +

Reset Password

+

Reset your password

+ + +``` + +##### Via Dashboard + 1. Go to your dashboard **Authentication** section 1. In **URL Configuration**, set **Site URL** to your application URL 1. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback` -1. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback"` +1. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback"` You can now add the `/forgot-password` and `/set-password` custom routes: @@ -252,6 +318,8 @@ export const MyAdmin = () => ( ); ``` +For HashRouter see [Using Hash Router](#using-hash-router). + #### OAuth Authentication To setup OAuth authentication, you can pass a `LoginPage` element: @@ -277,11 +345,18 @@ export const MyAdmin = () => ( ``` Make sure you enabled the specified providers in your Supabase instance: -- [Hosted instance](https://supabase.com/docs/guides/auth/social-login) -- [Local instance](https://supabase.com/docs/reference/cli/config#auth.external.provider.enabled) + +- [Hosted instance](https://supabase.com/docs/guides/auth/social-login) +- [Local instance](https://supabase.com/docs/reference/cli/config#auth.external.provider.enabled) This also requires you to configure the redirect URLS on your supabase instance: +##### Via config.toml +1. Go to your `config.toml` file +2. In `[auth]` section set `site_url` to your application URL +3. In `[auth]`, add the following URL in the `additional_redirect_urls = [{APPLICATION_URL}}/auth-callback"]` + +##### Via Dashboard 1. Go to your dashboard **Authentication** section 1. In **URL Configuration**, set **Site URL** to your application URL 1. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback` @@ -298,7 +373,9 @@ export const MyAdmin = () => ( } + loginPage={ + + } > @@ -306,6 +383,8 @@ export const MyAdmin = () => ( ); ``` +For HashRouter see [Using Hash Router](#using-hash-router). + ## Internationalization Support We provide two language packages: From aed06e01caf1f0562f67a2b7c44f480d511503ce Mon Sep 17 00:00:00 2001 From: Anthony Rimet Date: Thu, 8 Aug 2024 10:00:07 +0200 Subject: [PATCH 3/7] Feat: Apply suggestions from reviews --- .../{auth-callback/index.html => auth-callback.html} | 0 packages/ra-supabase/README.md | 7 ++++--- 2 files changed, 4 insertions(+), 3 deletions(-) rename packages/demo/public/{auth-callback/index.html => auth-callback.html} (100%) diff --git a/packages/demo/public/auth-callback/index.html b/packages/demo/public/auth-callback.html similarity index 100% rename from packages/demo/public/auth-callback/index.html rename to packages/demo/public/auth-callback.html diff --git a/packages/ra-supabase/README.md b/packages/ra-supabase/README.md index 7e042c4..8b3af22 100644 --- a/packages/ra-supabase/README.md +++ b/packages/ra-supabase/README.md @@ -96,10 +96,11 @@ Supabase uses URL hash links for its redirections. This can cause conflicts if y If you want to use the HashRouter, you'll need to modify the code. 1. Create a custom `auth-callback` folder inside your public folder. -2. Create an `index.html` file inside the `auth-callback`. This file will intercept the supabase redirect and rewrite the URL to prevent conflicts with the HashRouter. For example, see `packages/demo/public/auth-callback/index.html`. +2. Create an `index.html` file inside the `auth-callback`. This file will intercept the supabase redirect and rewrite the URL to prevent conflicts with the HashRouter. For example, see `packages/demo/public/auth-callback.html`. 3. Remove `BrowserRouter` from your `App.ts` -4. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback/index.html` -5. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback/index.html"` +4. Go to your dashboard **Authentication** section +5. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback.html` +6. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback.html"` ## Features From b3fe3fdfebc4da2884a00120ba3a30a982d0faaf Mon Sep 17 00:00:00 2001 From: Anthony Rimet Date: Thu, 8 Aug 2024 10:52:37 +0200 Subject: [PATCH 4/7] Feat(doc): Update documentation --- packages/ra-supabase/README.md | 37 ++++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/packages/ra-supabase/README.md b/packages/ra-supabase/README.md index 8b3af22..8a47fe6 100644 --- a/packages/ra-supabase/README.md +++ b/packages/ra-supabase/README.md @@ -95,12 +95,37 @@ Supabase uses URL hash links for its redirections. This can cause conflicts if y If you want to use the HashRouter, you'll need to modify the code. -1. Create a custom `auth-callback` folder inside your public folder. -2. Create an `index.html` file inside the `auth-callback`. This file will intercept the supabase redirect and rewrite the URL to prevent conflicts with the HashRouter. For example, see `packages/demo/public/auth-callback.html`. -3. Remove `BrowserRouter` from your `App.ts` -4. Go to your dashboard **Authentication** section -5. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback.html` -6. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback.html"` +1. Create a custom `auth-callback.html` file inside your public folder. This file will intercept the supabase redirect and rewrite the URL to prevent conflicts with the HashRouter. For example, see `packages/demo/public/auth-callback.html`. +2. Remove `BrowserRouter` from your `App.ts` + +#### Via Dashboard +3. Go to your Supabase dashboard **Authentication** section +4. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback.html` +5. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback.html"` + +##### Via config.toml + +3. Go to your `config.toml` file +4. In `[auth]` section set `site_url` to your application URL +5. In `[auth]`, add the following URL in the `additional_redirect_urls = [{APPLICATION_URL}}/auth-callback.html"]` +6. Add an `[auth.email.template.{TYPE}]` section with the following option : + +``` +[auth.email.template.TYPE] +subject = {TYPE_MESSAGE} +content_path = "./supabase/templates/{TYPE}.html" +``` + +In `{TYPE}.html` set the `auth-callback` redirection + +```HTML + + +

{TYPE_MESSAGE}

+

{TYPE_CTA}

+ + +``` ## Features From b9a10b9f8cb2c7d7cb63847776b6d743bffeb13f Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 8 Aug 2024 11:50:12 +0200 Subject: [PATCH 5/7] Update packages/ra-supabase/README.md Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> --- packages/ra-supabase/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ra-supabase/README.md b/packages/ra-supabase/README.md index 8a47fe6..92ab14c 100644 --- a/packages/ra-supabase/README.md +++ b/packages/ra-supabase/README.md @@ -98,7 +98,8 @@ If you want to use the HashRouter, you'll need to modify the code. 1. Create a custom `auth-callback.html` file inside your public folder. This file will intercept the supabase redirect and rewrite the URL to prevent conflicts with the HashRouter. For example, see `packages/demo/public/auth-callback.html`. 2. Remove `BrowserRouter` from your `App.ts` -#### Via Dashboard +#### Configuring an hosted Supabase instance + 3. Go to your Supabase dashboard **Authentication** section 4. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback.html` 5. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback.html"` From 77baefa6cdd8cf3968db20d80b38970ebdb875f2 Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 8 Aug 2024 11:50:28 +0200 Subject: [PATCH 6/7] Update packages/ra-supabase/README.md Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> --- packages/ra-supabase/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-supabase/README.md b/packages/ra-supabase/README.md index 92ab14c..2263dd1 100644 --- a/packages/ra-supabase/README.md +++ b/packages/ra-supabase/README.md @@ -104,7 +104,7 @@ If you want to use the HashRouter, you'll need to modify the code. 4. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback.html` 5. In **Email Templates**, change the `"{{ .ConfirmationURL }}"` to `"{{ .ConfirmationURL }}/auth-callback.html"` -##### Via config.toml +##### Configuring a local Supabase instance 3. Go to your `config.toml` file 4. In `[auth]` section set `site_url` to your application URL From 4affe7bdce7bf1208929d6ecebc2aab6ae35fea0 Mon Sep 17 00:00:00 2001 From: Anthony Rimet Date: Thu, 8 Aug 2024 11:52:53 +0200 Subject: [PATCH 7/7] Update documentation --- packages/ra-supabase/README.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/ra-supabase/README.md b/packages/ra-supabase/README.md index 2263dd1..36e9c2a 100644 --- a/packages/ra-supabase/README.md +++ b/packages/ra-supabase/README.md @@ -109,7 +109,7 @@ If you want to use the HashRouter, you'll need to modify the code. 3. Go to your `config.toml` file 4. In `[auth]` section set `site_url` to your application URL 5. In `[auth]`, add the following URL in the `additional_redirect_urls = [{APPLICATION_URL}}/auth-callback.html"]` -6. Add an `[auth.email.template.{TYPE}]` section with the following option : +6. Add an `[auth.email.template.{TYPE}]` section with the following option : ``` [auth.email.template.TYPE] @@ -210,7 +210,7 @@ export const MyAdmin = () => ( This requires you to configure your supabase instance: -##### Via config.toml +##### Configuring a local Supabase instance 1. Go to your `config.toml` file 2. In `[auth]` section set `site_url` to your application URL @@ -235,7 +235,7 @@ In `invite.html` set the `auth-callback` redirection ``` -##### Via Dashboard +#### Configuring an hosted Supabase instance 1. Go to your dashboard **Authentication** section 1. In **URL Configuration**, set **Site URL** to your application URL @@ -280,7 +280,7 @@ If users forgot their password, they can request for a reset if you add the `/fo This requires you to configure your supabase instance: -##### Via config.toml +##### Configuring a local Supabase instance 1. Go to your `config.toml` file 2. In `[auth]` section set `site_url` to your application URL @@ -304,7 +304,7 @@ In `recovery.html` set the `auth-callback` redirection ``` -##### Via Dashboard +#### Configuring an hosted Supabase instance 1. Go to your dashboard **Authentication** section 1. In **URL Configuration**, set **Site URL** to your application URL @@ -378,12 +378,14 @@ Make sure you enabled the specified providers in your Supabase instance: This also requires you to configure the redirect URLS on your supabase instance: -##### Via config.toml +##### Configuring a local Supabase instance + 1. Go to your `config.toml` file 2. In `[auth]` section set `site_url` to your application URL 3. In `[auth]`, add the following URL in the `additional_redirect_urls = [{APPLICATION_URL}}/auth-callback"]` -##### Via Dashboard +#### Configuring an hosted Supabase instance + 1. Go to your dashboard **Authentication** section 1. In **URL Configuration**, set **Site URL** to your application URL 1. In **URL Configuration**, add the following URL in the **Redirect URLs** section: `YOUR_APPLICATION_URL/auth-callback`