mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
remove deprecated orphan page (#20940)
This commit is contained in:
Charis authored and GitHub committed
1 parent
d5a6312baa
commit
aecd53831a
1 file changed
-250
@@ -1,250 +0,0 @@
|
||||
import Layout from '~/layouts/DefaultGuideLayout'
|
||||
import { Accordion } from 'ui'
|
||||
|
||||
export const meta = {
|
||||
id: 'auth-password-reset',
|
||||
title: 'Password Reset',
|
||||
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
|
||||
- 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
|
||||
|
||||
<Tabs
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="js"
|
||||
queryGroup="language"
|
||||
>
|
||||
<TabPanel id="js" label="JavaScript">
|
||||
|
||||
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.
|
||||
|
||||
```js
|
||||
await supabase.auth.resetPasswordForEmail('hello@example.com', {
|
||||
redirectTo: 'http://example.com/account/update-password',
|
||||
})
|
||||
```
|
||||
|
||||
</TabPanel>
|
||||
<TabPanel id="kotlin" label="Kotlin">
|
||||
|
||||
Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/kotlin/auth-resetpasswordforemail) to reset a user password. This method takes a parameter of `redirectUrl` 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.
|
||||
|
||||
```kotlin
|
||||
supabase.auth.resetPasswordForEmail(
|
||||
email = "hello@example.com",
|
||||
redirectUrl = "http://example.com/account/update-password"
|
||||
)
|
||||
```
|
||||
|
||||
If you are on one of the Kotlin targets that have built-in support for redirect url handling like Android, you may want to checkout [OAuth and OTP link verification](https://supabase.com/docs/reference/kotlin/initializing).
|
||||
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
### 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
|
||||
|
||||
<Tabs
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="js"
|
||||
queryGroup="language"
|
||||
>
|
||||
<TabPanel id="js" label="JavaScript">
|
||||
|
||||
To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and pass along the new password to this method.
|
||||
|
||||
```js
|
||||
await supabase.auth.updateUser({ password: new_password })
|
||||
```
|
||||
|
||||
</TabPanel>
|
||||
<TabPanel id="kotlin" label="Kotlin">
|
||||
|
||||
To update the password we call the [`.modifyUser`](/docs/reference/kotlin/auth-updateuser) method and pass along the new password to this method.
|
||||
|
||||
```kotlin
|
||||
supabase.auth.modifyUser {
|
||||
password = "new_password"
|
||||
}
|
||||
```
|
||||
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
## Server-Side Rendering (SSR)
|
||||
|
||||
### Sending password reset email
|
||||
|
||||
<Tabs
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="js"
|
||||
queryGroup="language"
|
||||
>
|
||||
<TabPanel id="js" label="JavaScript">
|
||||
|
||||
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.
|
||||
|
||||
```js
|
||||
await supabase.auth.resetPasswordForEmail('hello@example.com', {
|
||||
redirectTo: 'http://example.com/api/auth/callback?next=/account/update-password',
|
||||
})
|
||||
```
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
We are using `next` as our query parameter, but this can name whatever you like.
|
||||
|
||||
</Admonition>
|
||||
|
||||
</TabPanel>
|
||||
<TabPanel id="kotlin" label="Kotlin">
|
||||
|
||||
Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/kotlin/auth-resetpasswordforemail) to reset a user password. This method takes a parameter of `redirectUrl` 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.
|
||||
|
||||
```kotlin
|
||||
supabase.auth.resetPasswordForEmail(
|
||||
email = "hello@example.com",
|
||||
redirectUrl = "http://example.com/api/auth/callback?next=/account/update-password"
|
||||
)
|
||||
```
|
||||
|
||||
If you are on one of the Kotlin targets that have built-in support for redirect url handling like Android, you may want to checkout [OAuth and OTP link verification](https://supabase.com/docs/reference/kotlin/initializing).
|
||||
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
### 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 exchange code.
|
||||
|
||||
### Exchange authorization code
|
||||
|
||||
<Tabs
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="js"
|
||||
queryGroup="language"
|
||||
>
|
||||
<TabPanel id="js" label="JavaScript">
|
||||
|
||||
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.
|
||||
|
||||
```js
|
||||
// api/auth/callback.ts
|
||||
|
||||
// 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
|
||||
await supabase.auth.exchangeCodeForSession(code)
|
||||
```
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
The query parameter is always `code` for the authorization code returned from the Supabase API
|
||||
|
||||
</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
|
||||
|
||||
// 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 Next.js API response object in this example
|
||||
res.redirect(next)
|
||||
```
|
||||
|
||||
</TabPanel>
|
||||
<TabPanel id="kotlin" label="Kotlin">
|
||||
|
||||
Here is an example on Android:
|
||||
|
||||
```kotlin
|
||||
//Wherever you initialize your SupabaseClient:
|
||||
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
|
||||
install(GoTrue) {
|
||||
flowType = FlowType.PKCE
|
||||
scheme = "exampleApp"
|
||||
host = "callback"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```xml
|
||||
<!-- AndroidManifest.xml -->
|
||||
<intent-filter>
|
||||
<category android:name="android.intent.category.DEFAULT" />
|
||||
<action android:name="android.intent.action.VIEW" />
|
||||
|
||||
<category android:name="android.intent.category.BROWSABLE" />
|
||||
<data android:scheme="exampleApp" android:host="callback" />
|
||||
</intent-filter>
|
||||
```
|
||||
|
||||
```kotlin
|
||||
//MainActivity.kt
|
||||
override fun onCreate() {
|
||||
client.handleDeeplinks(intent)
|
||||
}
|
||||
```
|
||||
|
||||
That's it! `supabase-kt` will take care of parsing and importing the session. Other targets are similar, you can check [OAuth and OTP link verification](https://supabase.com/docs/reference/kotlin/initializing) for more information.
|
||||
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
### Update password
|
||||
|
||||
<Tabs
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="js"
|
||||
queryGroup="language"
|
||||
>
|
||||
<TabPanel id="js" label="JavaScript">
|
||||
|
||||
To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and pass along the new password to this method.
|
||||
|
||||
```js
|
||||
await supabase.auth.updateUser({ password: new_password })
|
||||
```
|
||||
|
||||
</TabPanel>
|
||||
<TabPanel id="kotlin" label="Kotlin">
|
||||
|
||||
To update the password we call the [`.modifyUser`](/docs/reference/kotlin/auth-updateuser) method and pass along the new password to this method.
|
||||
|
||||
```kotlin
|
||||
supabase.auth.modifyUser {
|
||||
password = "new_password"
|
||||
}
|
||||
```
|
||||
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
export const Page = ({ children }) => <Layout meta={meta} children={children} />
|
||||
|
||||
export default Page
|
||||
Reference in new issue
Block a user