mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
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:
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 })
|
||||
|
||||
Reference in new issue
Block a user