From 9952fec9d9ebd9e5edea58f00851670b249b510d Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Wed, 3 May 2023 22:58:47 +0000 Subject: [PATCH 01/11] Add password reset guide to the auth section --- .../NavigationMenu.constants.ts | 1 + .../pages/guides/auth/auth-password-reset.mdx | 104 ++++++++++++++++++ 2 files changed, 105 insertions(+) create mode 100644 apps/docs/pages/guides/auth/auth-password-reset.mdx diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 78292feff7e..d2d9a91bfe6 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -295,6 +295,7 @@ export const auth = { }, ], }, + { name: 'Password Reset', url: '/guides/auth/auth-password-reset' }, { name: 'Email Templates', url: '/guides/auth/auth-email-templates' }, ], }, diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx new file mode 100644 index 00000000000..88664550455 --- /dev/null +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -0,0 +1,104 @@ +import Layout from '~/layouts/DefaultGuideLayout' +import { Accordion } from 'ui' + +export const meta = { + id: 'auth-password-reset', + title: 'Password Reset', + description: 'How to reset your password for your Supabase project', +} + +- Send email for password reset using [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) while providing a `redirectTo` parameter +- Email link will work as a magic link and log the user in then take them to the url specified in the `redirectTo` parameter +- Create form to update the password and call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method with the new password + +## Single Page Application (SPA) + +### Sending password reset email +Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) +to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to +the update password page. This url must be saved in your allowed [Redirect URLs](https://app.supabase.com/project/sgbluorgiylcyqpqihab/auth/url-configuration) +list or it won't work. + +```ts +await supabase.auth.resetPasswordForEmail("hello@example.com", { + redirectTo: 'http://example.com/account/update-password' +}) +``` + +### Email link +The email link you receive will work like a magic link. This way when you click the link you will be logged into +the website. Since we passed a redirect URL to the [`.resetPasswordForEmail`](https://supabase.com/docs/reference/javascript/auth-resetpasswordforemail) +method the user should be sent to the update password page. + +### Update Password +To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and pass along the new password to this method. + +```ts +await supabase.auth.updateUser({ password: new_password }) +``` + +## Server-Side Rendering (SSR) + +### Sending password reset email +Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) +to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to +the callback page along with a query parameter to the update password page. This URL must be saved in your +allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuration) list found at +[Authentication > Redirect Configuration](https://app.supabase.com/project/_/auth/url-configuration) or it won't +redirect the user. + +```ts +await supabase.auth.resetPasswordForEmail("hello@example.com", { + redirectTo: 'http://example.com/auth/callback?next=/account/update-password' +}) +``` + + + +We are using `next` as our query parameter but this is just personal preference, you could +use a different query parameter name. + + + +### Email link +The email link you receive will behave like a magic link. When the link is clicked you will be sent to the `redirectTo` URL you specified that points to the path with the code exchange code. + +### Exchange authorization code +After getting redirected to the server page we need to retrieve the code from the query parameter called `code` and pass it to the `.exchangeAuthCodeForSession` function. +```ts +// code can be retrieved using your framework of choice way of getting query parameter from the url. +// This is just example code +const code = url.searchParams.get('code') + +// call the Supabase API to exchange the code for a session +await supabase.auth.exchangeCodeForSession(code) +``` + + + +The query parameter is always `code` for the authorization code returned from the Supabase API + + + +We will also need to check for the `next` query parameter to redirect the user to the update password page. +```ts +// password page path can be retrieved using your framework of choice way of getting query parameter from the url. +// This is just example code +const next = url.searchParams.get('next') + +// using NextJS response object in this example +res.redirect(next) +``` + +### Update Password +To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and +pass along the new password to this method. + +```ts +await supabase.auth.updateUser({ password: new_password }) +``` + +export const Page = ({ children }) => + +export default Page + From 3ab93886d9d6d17c5c2cd27ae5f0fd1fa70c5dd2 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Wed, 3 May 2023 23:23:46 +0000 Subject: [PATCH 02/11] Update code snippets with filename --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index 88664550455..9bd052a0345 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -49,7 +49,7 @@ redirect the user. ```ts await supabase.auth.resetPasswordForEmail("hello@example.com", { - redirectTo: 'http://example.com/auth/callback?next=/account/update-password' + redirectTo: 'http://example.com/api/auth/callback?next=/account/update-password' }) ``` @@ -66,6 +66,8 @@ The email link you receive will behave like a magic link. When the link is click ### Exchange authorization code After getting redirected to the server page we need to retrieve the code from the query parameter called `code` and pass it to the `.exchangeAuthCodeForSession` function. ```ts +// api/auth/callback.ts + // code can be retrieved using your framework of choice way of getting query parameter from the url. // This is just example code const code = url.searchParams.get('code') @@ -82,6 +84,8 @@ The query parameter is always `code` for the authorization code returned from th We will also need to check for the `next` query parameter to redirect the user to the update password page. ```ts +// api/auth/callback.ts + // password page path can be retrieved using your framework of choice way of getting query parameter from the url. // This is just example code const next = url.searchParams.get('next') From 0d17d50eb529750f87c0368a05f58ed965b03971 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Fri, 5 May 2023 16:42:04 +0000 Subject: [PATCH 03/11] Update apps/docs/pages/guides/auth/auth-password-reset.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index 9bd052a0345..8e769e955b2 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -20,8 +20,8 @@ the update password page. This url must be saved in your allowed [Redirect URLs] list or it won't work. ```ts -await supabase.auth.resetPasswordForEmail("hello@example.com", { - redirectTo: 'http://example.com/account/update-password' +await supabase.auth.resetPasswordForEmail('hello@example.com', { + redirectTo: 'http://example.com/account/update-password', }) ``` From 45141a745977ebbdae5c1eea38d7d3cf24b169c4 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Fri, 5 May 2023 16:42:18 +0000 Subject: [PATCH 04/11] Update apps/docs/pages/guides/auth/auth-password-reset.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index 8e769e955b2..2d56f06c77b 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -48,8 +48,8 @@ allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuratio redirect the user. ```ts -await supabase.auth.resetPasswordForEmail("hello@example.com", { - redirectTo: 'http://example.com/api/auth/callback?next=/account/update-password' +await supabase.auth.resetPasswordForEmail('hello@example.com', { + redirectTo: 'http://example.com/api/auth/callback?next=/account/update-password', }) ``` From 7673a3c4b02bbe2625e8e94c04d89b13ada08f91 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Fri, 5 May 2023 16:42:32 +0000 Subject: [PATCH 05/11] Update apps/docs/pages/guides/auth/auth-password-reset.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index 2d56f06c77b..b5625e09047 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -55,8 +55,7 @@ await supabase.auth.resetPasswordForEmail('hello@example.com', { -We are using `next` as our query parameter but this is just personal preference, you could -use a different query parameter name. +We are using `next` as our query parameter, but this can name whatever you like. From 899921de63d54876008731dcfd31830193995d4a Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Fri, 5 May 2023 16:42:44 +0000 Subject: [PATCH 06/11] Update apps/docs/pages/guides/auth/auth-password-reset.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index b5625e09047..217dcf9fb2a 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -60,7 +60,7 @@ We are using `next` as our query parameter, but this can name whatever you like. ### Email link -The email link you receive will behave like a magic link. When the link is clicked you will be sent to the `redirectTo` URL you specified that points to the path with the code exchange code. +The email link you receive will behave like a magic link. When the link is clicked you will be sent to the `redirectTo` URL you specified that points to the path with the exchange code. ### Exchange authorization code After getting redirected to the server page we need to retrieve the code from the query parameter called `code` and pass it to the `.exchangeAuthCodeForSession` function. From 296d4bdfc1d8b0806a44a00b5bba3bfba775a90e Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Fri, 5 May 2023 16:42:57 +0000 Subject: [PATCH 07/11] Update apps/docs/pages/guides/auth/auth-password-reset.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index 217dcf9fb2a..aef61326399 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -63,7 +63,7 @@ We are using `next` as our query parameter, but this can name whatever you like. The email link you receive will behave like a magic link. When the link is clicked you will be sent to the `redirectTo` URL you specified that points to the path with the exchange code. ### Exchange authorization code -After getting redirected to the server page we need to retrieve the code from the query parameter called `code` and pass it to the `.exchangeAuthCodeForSession` function. +After redirecting to the server page, we need to retrieve the code from the query parameter called `code` and pass it to the `.exchangeAuthCodeForSession` function. ```ts // api/auth/callback.ts From 7bef3f1cd0eb2e152667a2a356d7a053e2480d9c Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Fri, 5 May 2023 16:44:15 +0000 Subject: [PATCH 08/11] Update apps/docs/pages/guides/auth/auth-password-reset.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index aef61326399..85cf47c82e5 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -67,8 +67,8 @@ After redirecting to the server page, we need to retrieve the code from the quer ```ts // api/auth/callback.ts -// code can be retrieved using your framework of choice way of getting query parameter from the url. -// This is just example code +// The code is retrieved from the query parameter - use whichever mechanism is recommended +// for your app/framework. This is just an example. const code = url.searchParams.get('code') // call the Supabase API to exchange the code for a session From 026c0633753acb047f4a1fe29f66e7d7d8036921 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Fri, 5 May 2023 16:44:23 +0000 Subject: [PATCH 09/11] Update apps/docs/pages/guides/auth/auth-password-reset.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index 85cf47c82e5..03ff57c24a3 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -85,8 +85,8 @@ We will also need to check for the `next` query parameter to redirect the user t ```ts // api/auth/callback.ts -// password page path can be retrieved using your framework of choice way of getting query parameter from the url. -// This is just example code +// The password page path is retrieved from the query parameter - use whichever mechanism is recommended +// for your app/framework. This is just an example. const next = url.searchParams.get('next') // using NextJS response object in this example From 0fdf755600d94d6c2c710171099d66ed50a7fd42 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Sun, 7 May 2023 22:47:41 +0000 Subject: [PATCH 10/11] Update the redirect URLs section with correct URL --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index 03ff57c24a3..a7acf6f03f6 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -16,8 +16,10 @@ export const meta = { ### Sending password reset email Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to -the update password page. This url must be saved in your allowed [Redirect URLs](https://app.supabase.com/project/sgbluorgiylcyqpqihab/auth/url-configuration) -list or it won't work. +the update password page. This URL must be saved in your +allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuration) list found at +[Authentication > Redirect Configuration](https://app.supabase.com/project/_/auth/url-configuration) or it won't +redirect the user. ```ts await supabase.auth.resetPasswordForEmail('hello@example.com', { From b4f3e77ebe7b50aa6ad820c923513f1e63baa2ee Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Wed, 10 May 2023 10:34:07 +0000 Subject: [PATCH 11/11] Update description --- apps/docs/pages/guides/auth/auth-password-reset.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx index a7acf6f03f6..a6ecc280009 100644 --- a/apps/docs/pages/guides/auth/auth-password-reset.mdx +++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx @@ -4,7 +4,7 @@ import { Accordion } from 'ui' export const meta = { id: 'auth-password-reset', title: 'Password Reset', - description: 'How to reset your password for your Supabase project', + description: 'How to reset password with Supabase Auth', } - Send email for password reset using [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) while providing a `redirectTo` parameter @@ -91,7 +91,7 @@ We will also need to check for the `next` query parameter to redirect the user t // for your app/framework. This is just an example. const next = url.searchParams.get('next') -// using NextJS response object in this example +// using NextJS API response object in this example res.redirect(next) ```