mirror of
https://github.com/supabase/supabase.git
synced 2026-07-04 23:14:28 +08:00
144 lines
3.0 KiB
Plaintext
144 lines
3.0 KiB
Plaintext
---
|
|
id: auth-email
|
|
title: 'Login With Email'
|
|
description: Use Supabase to Authenticate and Authorize your users using email.
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
|
|
## Overview
|
|
|
|
Setting up Email logins for your Supabase application.
|
|
|
|
- Add Email authenticator to your [Supabase Project](https://app.supabase.com)
|
|
- Add the login code to your application - [JavaScript](https://github.com/supabase/supabase-js) | [Dart](https://github.com/supabase/supabase-dart)
|
|
|
|
## Configure email settings
|
|
|
|
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
|
|
- In the left sidebar, click the `Authentication` icon (near the top)
|
|
- Click `Settings` from the list to go to the `Authentication Settings` page
|
|
- Enter the final (hosted) URL of your app under `Site URL`
|
|
- Under `Email Auth` turn `Enable Email Signup` to ON
|
|
- Click `Save`
|
|
|
|
:::note Self hosting
|
|
|
|
For self-hosting, you can update your project configuration using the files and environment variables provided.
|
|
See the [self-hosting docs](/docs/guides/hosting/overview#configuration) for details.
|
|
|
|
:::
|
|
|
|
### Add login code to your client app
|
|
|
|
Add logins using our client libraries:
|
|
|
|
- [JavaScript](/docs/reference/javascript/auth-signin#sign-in-with-email)
|
|
- [Dart](/docs/reference/dart/auth-signin#sign-in-with-email)
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="guides/auth"
|
|
values={[{ label: 'JavaScript', value: 'js' }, { label: 'Dart', value: 'dart' }]}
|
|
>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const { user, error } = await supabase.auth.signIn({
|
|
email: 'example@email.com',
|
|
password: 'example-password',
|
|
})
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="dart">
|
|
|
|
```dart
|
|
final res = await supabase.auth.signIn(
|
|
email: 'example@email.com',
|
|
password: 'example-password'
|
|
);
|
|
|
|
final user = res.data?.user;
|
|
final error = res.error;
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
Add this function which you can call from a button, link, or UI element.
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="guides/auth"
|
|
values={[{ label: 'JavaScript', value: 'js' }, { label: 'Dart', value: 'dart' }]}
|
|
>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
async function signInWithEmail() {
|
|
const { user, error } = await supabase.auth.signIn({
|
|
email: 'example@email.com',
|
|
password: 'example-password',
|
|
})
|
|
}
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="dart">
|
|
|
|
```dart
|
|
Future<void> signInWithEmail() async {
|
|
await supabase.auth.signIn(
|
|
email: 'example@email.com',
|
|
password: 'example-password'
|
|
);
|
|
}
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
To log out:
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="guides/auth"
|
|
values={[{ label: 'JavaScript', value: 'js' }, { label: 'Dart', value: 'dart' }]}
|
|
>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
async function signOut() {
|
|
const { error } = await supabase.auth.signOut()
|
|
}
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="dart">
|
|
|
|
```dart
|
|
Future<void> signOut() async {
|
|
await supabase.auth.signOut();
|
|
}
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
## Resources
|
|
|
|
- [Supabase Account - Free Tier OK](https://supabase.com)
|
|
- [Supabase JS Client](https://github.com/supabase/supabase-js)
|
|
- [Supabase Dart Client](https://github.com/supabase/supabase-dart)
|