Merge pull request #15952 from supabase/fix/password-reset-page-line-breaks

Fix line breaks on the password reset page
This commit is contained in:
Greg Richardson authored and GitHub committed 2023-07-24 09:28:15 -06:00
commit 6bfb489368
1 file changed
+6 -17
@@ -14,12 +14,7 @@ export const meta = {
## 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://supabase.com/dashboard/project/_/auth/url-configuration) list found at
[Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't
redirect the user.
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://supabase.com/dashboard/project/_/auth/url-configuration) list found at [Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't redirect the user.
```ts
await supabase.auth.resetPasswordForEmail('hello@example.com', {
@@ -28,9 +23,7 @@ await supabase.auth.resetPasswordForEmail('hello@example.com', {
```
### 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.
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.
@@ -42,12 +35,7 @@ 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://supabase.com/dashboard/project/_/auth/url-configuration) list found at
[Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't
redirect the user.
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://supabase.com/dashboard/project/_/auth/url-configuration) list found at [Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't redirect the user.
```ts
await supabase.auth.resetPasswordForEmail('hello@example.com', {
@@ -66,6 +54,7 @@ The email link you receive will behave like a magic link. When the link is click
### Exchange authorization code
After redirecting to the server page, we need to retrieve the code from the query parameter called `code` and pass it to the `.exchangeCodeForSession` function.
```ts
// api/auth/callback.ts
@@ -84,6 +73,7 @@ The query parameter is always `code` for the authorization code returned from th
</Admonition>
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
@@ -96,8 +86,7 @@ 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.
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 })