Login with Twitter
To enable Twitter Auth for your project, you need to set up a Twitter OAuth application and add the application credentials to your Supabase Dashboard.
Overview
Setting up Twitter logins for your application consists of 3 parts:
- Create and configure a Twitter Project and App on the Twitter Developer Dashboard.
- Add your Twitter
API Key
andAPI Secret Key
to your Supabase Project. - Add the login code to your Supabase JS Client App.
Steps
Access your Twitter Developer account
- Go to developer.twitter.com.
- Click on
Sign in
at the top right to log in.
Find your callback URL
The next step requires a callback URL, which looks like this:
https://<project-ref>.supabase.co/auth/v1/callback
- Go to your Supabase Project Dashboard.
- Click on the
Settings
icon at the bottom of the left sidebar. - Click on
API
in the list. - Under Config / URL you'll find your API URL, you can click
Copy
to copy it to the clipboard. - Now just add
/auth/v1/callback
to the end of that to get your fullOAuth Redirect URI
.
Create a Twitter OAuth app
- Click
+ Create Project
.- Enter your project name, click
Next
. - Select your use case, click
Next
. - Enter a description for your project, click
Next
. - Enter a name for your app, click
Complete
. - Copy and save your
API Key
(this is yourclient_id
). - Copy and save your
API Secret Key
(this is yourclient_secret
).
- Enter your project name, click
- At the bottom, under
Next, setup your App
click the linkenable 3rd party authentication
. - Under
App Settings
, click on the gear icon next to your app name to go toApp Settings
. - At the bottom, next to
Authentication settings
, clickEdit
. - Turn
Enable 3-legged OAuth
ON. - Turn
Request email address from users
ON. - Enter your
Callback URL
. - Enter your
Website URL
. - Enter your
Terms of service URL
. - Enter your
Privacy policy URL
. - Click
Save
.
Enter your Twitter credentials into your Supabase Project
- Go to your Supabase Project Dashboard.
- In the left sidebar, click the
Authentication
icon (near the top). - Click
Settings
from the list to go to theAuthentication Settings
page. - Enter the final (hosted) URL of your app under
Site URL
(this is important). - Under
External OAuth Providers
turnTwitter Enabled
to ON. - Enter your
API Key
(client_id
) andAPI Secret Key
(client_secret
) saved in the previous step. - Click
Save
.
Add login code to your client app
The JavaScript client code is documented here: Supabase OAuth Client Code.
const { user, session, error } = await supabase.auth.signIn({
provider: 'twitter',
})
Add this function which you can call from a button, link, or UI element.
async function signInWithTwitter() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'twitter',
})
}
To log out:
async function signout() {
const { error } = await supabase.auth.signOut()
}