Phone Login
Authenticating users via SMS can become expensive. Adjust your project's rate limits and configure CAPTCHA to control the bill. Read more about this in the Production Checklist.
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 reasons why you might want to add phone login to your applications:
-
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.
-
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.
-
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 a provider with Supabase Auth
To use Phone Login, you first need to set up a Phone provider. Supabase supports Phone Login with several communications platforms. Follow the guides below to set up your provider.
MessageBird SMS Login
Twilio SMS Login
Vonage SMS Login
Using Phone Login
You can use Phone Login to:
- Sign up a user with phone number and password
- Sign in a user with a One Time Password (OTP)
- Update a user's phone number
Each of these flows sends the user an SMS containing a six-digit PIN, which you must verify to complete the flow.
Sign up a user with phone number and password
You can use a user's mobile phone number, instead of an email address, when they sign up with a password.
This practice is usually discouraged because phone networks often recycle mobile phone numbers. Anyone receiving a recycled phone number gets access to the original user's account. To mitigate this risk, implement MFA.
To sign up the user, call signUp() with their phone number and password:
_10const { data, error } = await supabase.auth.signUp({_10 phone: '+13334445555',_10 password: 'some-password',_10})
The user receives an SMS with a 6-digit pin that you must verify within 60 seconds.
After their phone number is verified, the user can use their phone number and password to sign in with needing to reverify each time:
_10const { user, error } = await supabase.auth.signInWithPassword({_10 phone: '+13334445555',_10 password: 'some-password',_10})
Sign in a user with OTP
With OTP, a user can sign in without setting a password on their account. They need to verify their phone number each time they sign in.
_10const { data, error } = await supabase.auth.signInWithOtp({_10 phone: '+13334445555',_10})
The user receives an SMS with a 6-digit pin that you must verify within 60 seconds.
Update a user's phone number
To update a user's phone number, the user must be logged in. Call updateUser() with their phone number:
_10const { data, error } = await supabase.auth.updateUser({_10 phone: '123456789',_10})
The user receives an SMS with a 6-digit pin that you must verify within 60 seconds.
Verify a user
To verify the one-time password (OTP) sent to the user's phone number, call verifyOtp() with the phone number and OTP:
You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to verifyOtp:
_10const {_10 data: { session },_10 error,_10} = await supabase.auth.verifyOtp({_10 phone: '+13334445555',_10 token: '123456',_10 type: 'sms',_10})
If successful the user will now be logged in and you should receive a valid session like:
_10{_10 "access_token": "<ACCESS_TOKEN>",_10 "token_type": "bearer",_10 "expires_in": 3600,_10 "refresh_token": "<REFRESH_TOKEN>"_10}
The access token can be sent in the Authorization header as a Bearer token for any CRUD operations on supabase-js. See our guide on Row Level Security for more info on restricting access on a user basis.