mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
105 lines
3.1 KiB
Plaintext
105 lines
3.1 KiB
Plaintext
import Layout from '~/layouts/DefaultGuideLayout'
|
|
|
|
export const meta = {
|
|
id: 'auth-magic-link',
|
|
title: 'Login With Magic Link',
|
|
description: 'Use Supabase to authenticate and authorize your users using magic links.',
|
|
}
|
|
|
|
Magic links are a form of passwordless logins where users click on a link sent to their email address to log in to their accounts.
|
|
Magic links only work with email addresses. By default, a user can only request a magic link once every 60 seconds.
|
|
|
|
## Overview
|
|
|
|
Setting up Magic Link logins for your Supabase application.
|
|
|
|
- Add the login code to your application - [JavaScript](/docs/reference/javascript/introduction) | [Flutter](/docs/reference/dart/installing)
|
|
|
|
## Add Magic Link into your Supabase Project
|
|
|
|
1. For [Site URL](https://supabase.com/dashboard/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
|
|
1. For [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers), **enable email provider**.
|
|
|
|
## Add login code to your client app
|
|
|
|
<Admonition type="caution">
|
|
|
|
When making use of Magic Links with [the PKCE Flow](https://supabase.com/blog/supabase-auth-sso-pkce#introducing-pkce) do bear in mind that links can only be used in the same browser that they are sent from. Consequently, a magic link sent from Chrome on Desktop will be invalid if used on a Mobile Device.
|
|
|
|
</Admonition>
|
|
|
|
<Tabs
|
|
scrollable
|
|
size="small"
|
|
type="underlined"
|
|
defaultActiveId="js"
|
|
queryGroup="language"
|
|
>
|
|
<TabPanel id="js" label="JavaScript">
|
|
When your user signs in, call [signInWithOtp()](/docs/reference/javascript/auth-signinwithotp) with their email address:
|
|
|
|
```js
|
|
async function signInWithEmail() {
|
|
const { data, error } = await supabase.auth.signInWithOtp({
|
|
email: 'example@email.com',
|
|
options: {
|
|
emailRedirectTo: 'https://example.com/welcome',
|
|
},
|
|
})
|
|
}
|
|
```
|
|
|
|
</TabPanel>
|
|
<TabPanel id="dart" label="Dart">
|
|
|
|
When your user signs in, call [signIn()](/docs/reference/dart/auth-signinwithotp) with their email address:
|
|
|
|
```dart
|
|
Future<void> signInWithEmail() async {
|
|
final AuthResponse res = await supabase.auth.signinwithotp(email: 'example@email.com');
|
|
}
|
|
```
|
|
|
|
</TabPanel>
|
|
</Tabs>
|
|
|
|
<Tabs
|
|
scrollable
|
|
size="small"
|
|
type="underlined"
|
|
defaultActiveId="js"
|
|
queryGroup="language"
|
|
>
|
|
<TabPanel id="js" label="JavaScript">
|
|
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
|
|
|
|
```js
|
|
async function signOut() {
|
|
const { error } = await supabase.auth.signOut()
|
|
}
|
|
```
|
|
|
|
</TabPanel>
|
|
<TabPanel id="dart" label="Dart">
|
|
|
|
When your user signs out, call [signOut()](/docs/reference/dart/auth-signout) to remove them from the browser session and any objects from localStorage:
|
|
|
|
```dart
|
|
Future<void> signOut() async {
|
|
await supabase.auth.signOut();
|
|
}
|
|
```
|
|
|
|
</TabPanel>
|
|
</Tabs>
|
|
|
|
## Resources
|
|
|
|
- [Supabase Account - Free Plan OK](https://supabase.com)
|
|
- [Supabase JS Client](https://github.com/supabase/supabase-js)
|
|
- [Supabase Flutter Client](https://github.com/supabase/supabase-flutter)
|
|
|
|
export const Page = ({ children }) => <Layout meta={meta} children={children} />
|
|
|
|
export default Page
|