Files
supabase/apps/temp-docs/docs/reference/javascript/auth-signin.mdx
2022-05-30 14:52:54 +08:00

279 lines
6.2 KiB
Plaintext

---
id: auth-signin
title: 'signIn()'
slug: auth-signin
custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supabase.yml
---
import Tabs from '@theme/Tabs'
import TabsPanel from '@theme/TabsPanel'
Log in an existing user, or login via a third-party provider.
<Tabs
defaultActiveId="js"
groupId="reference/supabase-js"
values={[{ label: 'JavaScript', value: 'js' }]}>
<TabsPanel id="js" label="js">
```js
const { user, session, error } = await supabase.auth.signIn({
email: 'example@email.com',
password: 'example-password',
})
```
</TabsPanel>
</Tabs>
## Parameters
<ul className="method-list-group">
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
__namedParameters
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>UserCredentials</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
options
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
<ul className="method-list-group">
<h5 class="method-list-title method-list-title-isChild expanded">Properties</h5>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
redirectTo
</span>
<span className="method-list-item-label-badge false">
optional
</span>
<span className="method-list-item-validation">
<code>string</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
scopes
</span>
<span className="method-list-item-label-badge false">
optional
</span>
<span className="method-list-item-validation">
<code>string</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
</ul>
</li>
</ul>
## Notes
- A user can sign up either via email or OAuth.
- If you provide `email` without a `password`, the user will be sent a magic link.
- The magic link's destination URL is determined by the SITE_URL config variable. To change this, you can go to Authentication -> Settings on [app.supabase.com](https://app.supabase.com)
- Specifying a `provider` will open the browser to the relevant login page.
## Examples
### Sign in with email.
<Tabs
defaultActiveId="js"
groupId="reference/supabase-js"
values={[{ label: 'JavaScript', value: 'js' }]}>
<TabsPanel id="js" label="js">
```js
const { user, session, error } = await supabase.auth.signIn({
email: 'example@email.com',
password: 'example-password',
})
```
</TabsPanel>
</Tabs>
### Sign in with magic link.
If no password is provided, the user will be sent a "magic link" to their email address, which they can click to open your application with a valid session. By default, a given user can only request a Magic Link once every 60 seconds.
<Tabs
defaultActiveId="js"
groupId="reference/supabase-js"
values={[{ label: 'JavaScript', value: 'js' }]}>
<TabsPanel id="js" label="js">
```js
const { user, session, error } = await supabase.auth.signIn({
email: 'example@email.com',
})
```
</TabsPanel>
</Tabs>
### Sign in using third-party providers.
Supabase supports OAuth logins.
<Tabs
defaultActiveId="js"
groupId="reference/supabase-js"
values={[{ label: 'JavaScript', value: 'js' }]}>
<TabsPanel id="js" label="js">
```js
const { user, session, error } = await supabase.auth.signIn({
// provider can be 'github', 'google', 'gitlab', or 'bitbucket'
provider: 'github',
})
```
</TabsPanel>
</Tabs>
### Sign in with redirect.
Sometimes you want to control where the user is redirected to after they are logged in. Supabase supports this for
any URL path on your website (the base domain must be the same as the domain in your Auth settings).
<Tabs
defaultActiveId="js"
groupId="reference/supabase-js"
values={[{ label: 'JavaScript', value: 'js' }]}>
<TabsPanel id="js" label="js">
```js
const { user, session, error } = await supabase.auth.signIn(
{
provider: 'github',
},
{
redirectTo: 'https://example.com/welcome',
}
)
```
</TabsPanel>
</Tabs>
### Sign in with scopes.
If you need additional data from an OAuth provider, you can include a space-separated list of scopes in your request to get back an OAuth provider token.
You may also need to specify the scopes in the provider's OAuth app settings, depending on the provider.
<Tabs
defaultActiveId="js"
groupId="reference/supabase-js"
values={[{ label: 'JavaScript', value: 'js' }]}>
<TabsPanel id="js" label="js">
```js
const { user, session, error } = await supabase.auth.signIn(
{
provider: 'github',
},
{
scopes: 'repo gist notifications',
}
)
const oAuthToken = session.provider_token // use to access provider API
```
</TabsPanel>
</Tabs>
### Sign in using a refresh token (e.g. in React Native).
If you are completing a sign up or login in a React Native app you can pass the refresh token obtained from the provider to obtain a session.
<Tabs
defaultActiveId="js"
groupId="reference/supabase-js"
values={[{ label: 'JavaScript', value: 'js' }]}>
<TabsPanel id="js" label="js">
```js
// An example using Expo's `AuthSession`
const redirectUri = AuthSession.makeRedirectUri({ useProxy: false })
const provider = 'google'
AuthSession.startAsync({
authUrl: `https://MYSUPABASEAPP.supabase.co/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`,
returnUrl: redirectUri,
}).then(async (response: any) => {
if (!response) return
const { user, session, error } = await supabase.auth.signIn({
refreshToken: response.params?.refresh_token,
})
})
```
</TabsPanel>
</Tabs>