mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 10:25:06 +03:00
Passwordless Login -> Phone Login
This commit is contained in:
dannykng committed
1 parent
8b6e803169
commit
a32b4f7c40
5 files changed
+48
-74
No files matched your search
@@ -1,74 +0,0 @@
|
||||
import Layout from '~/layouts/DefaultGuideLayout'
|
||||
import { IconPanel, GlassPanel, IconMail } from 'ui'
|
||||
import Link from 'next/link'
|
||||
import { PhoneLoginsItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
|
||||
|
||||
export const meta = {
|
||||
title: 'Passwordless Login',
|
||||
description:
|
||||
'Learn about logging in with email one-time passwords (magic links) and SMS one-time passwords.',
|
||||
}
|
||||
|
||||
Passwordless login is a method of authentication that allows users to log in to a website or application without using a password. Instead of entering a password, the user may be asked to provide some other form of authentication, such as a one-time code sent via email or SMS, or by using a biometric factor like their fingerprint or facial recognition.
|
||||
|
||||
## Benefits
|
||||
|
||||
There are several benefits of implementing passwordless login in your applications:
|
||||
|
||||
1. **Improved user experience**: By eliminating the need for users to remember and enter complex passwords, passwordless login can make it easier and more convenient for users to log in to your application. This can improve the overall user experience and make it more enjoyable for users to interact with your application.
|
||||
|
||||
2. **Increased security**: Passwordless login can improve the security of your application by reducing the risk of password-related security breaches, such as password reuse and weak passwords. By using alternative forms of authentication, such as one-time codes or biometric factors, you can make it more difficult for unauthorized users to access your application.
|
||||
|
||||
3. **Reduced support burden**: Passwordless login can also help reduce the support burden for your team by eliminating the need to reset forgotten passwords or deal with other password-related issues. This can free up your team to focus on other important tasks and improve the efficiency of your operation.
|
||||
|
||||
## Set up Passwordless Login with Supabase Auth
|
||||
|
||||
Supabase supports passwordless logins through "magic links" (instead of entering a password, the user is sent
|
||||
a link which they can click to log in to their account) and one-time passwords via SMS through several communications platforms. Follow the guides below to set up a passwordless login flow with Supabase Auth.
|
||||
|
||||
### Email One-Time Password (OTP)
|
||||
|
||||
<div className="grid grid-cols-2 gap-12">
|
||||
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-10 not-prose py-8">
|
||||
<Link href={`/guides/auth/auth-magic-link`} passHref>
|
||||
<a>
|
||||
<IconPanel title={'Magic Link'} span="col-span-6" icon={
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-gold-1000">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
|
||||
</svg>
|
||||
}>
|
||||
|
||||
Implement Magic Link Login in your application
|
||||
|
||||
</IconPanel>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
### Phone SMS One-Time Password (OTP)
|
||||
|
||||
<div className="grid grid-cols-12 gap-10 not-prose py-8">
|
||||
{PhoneLoginsItems.map((item) => (
|
||||
<Link href={`/${item.url}`} key={item.name} passHref>
|
||||
<a className="col-span-4">
|
||||
<IconPanel
|
||||
title={item.name}
|
||||
span="col-span-6"
|
||||
icon={item.icon}
|
||||
isDarkMode={item.isDarkMode}
|
||||
>
|
||||
{item.linkDescription}
|
||||
</IconPanel>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
export const Page = ({ children }) => <Layout meta={meta} children={children} />
|
||||
|
||||
export default Page
|
||||
@@ -0,0 +1,48 @@
|
||||
import Layout from '~/layouts/DefaultGuideLayout'
|
||||
import { IconPanel, GlassPanel, IconMail } from 'ui'
|
||||
import Link from 'next/link'
|
||||
import { PhoneLoginsItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
|
||||
|
||||
export const meta = {
|
||||
title: 'Phone Login',
|
||||
description:
|
||||
'Learn about logging in with SMS one-time passwords.',
|
||||
}
|
||||
|
||||
Phone login is a method of authentication that allows users to log in to a website or application without using a password. Instead of entering a password, the user provides another form of authentication through a one-time code sent via SMS.
|
||||
|
||||
## Benefits
|
||||
|
||||
There are several benefits of implementing phone login in your applications:
|
||||
|
||||
1. **Improved user experience**: By eliminating the need for users to remember and enter complex passwords, phone login can make it easier and more convenient for users to log in to your application. This can improve the overall user experience and make it more enjoyable for users to interact with your application.
|
||||
|
||||
2. **Increased security**: Phone login can improve the security of your application by reducing the risk of password-related security breaches, such as password reuse and weak passwords. By using alternative forms of authentication, such as one-time codes or biometric factors, you can make it more difficult for unauthorized users to access your application.
|
||||
|
||||
3. **Reduced support burden**: Phone login can also help reduce the support burden for your team by eliminating the need to handle password recovery flows or deal with other password-related issues. This can free up your team to focus on other important tasks and improve the efficiency of your operation.
|
||||
|
||||
## Set up Phone Login with Supabase Auth
|
||||
|
||||
Supabase supports Phone Login with several communications platforms. Follow the guides below to set up a Phone Login flow with Supabase Auth.
|
||||
|
||||
<div className="grid grid-cols-12 gap-10 not-prose py-8">
|
||||
{PhoneLoginsItems.map((item) => (
|
||||
<Link href={`/${item.url}`} key={item.name} passHref>
|
||||
<a className="col-span-4">
|
||||
<IconPanel
|
||||
title={item.name}
|
||||
span="col-span-6"
|
||||
icon={item.icon}
|
||||
isDarkMode={item.isDarkMode}
|
||||
>
|
||||
{item.linkDescription}
|
||||
</IconPanel>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
export const Page = ({ children }) => <Layout meta={meta} children={children} />
|
||||
|
||||
export default Page
|
||||
File renamed without changes.
File renamed without changes.
Reference in new issue
Block a user