Login with LinkedIn
To enable LinkedIn Auth for your project, you need to set up a LinkedIn OAuth application and add the application credentials to your Supabase Dashboard.
Overview
Setting up LinkedIn logins for your application consists of 3 parts:
- Create and configure a LinkedIn Project and App on the LinkedIn Developer Dashboard.
- Add your LinkedIn
API Key
andAPI Secret Key
to your Supabase Project. - Add the login code to your Supabase JS Client App.
Steps
Access your LinkedIn Developer account
- Go to LinkedIn Developer Dashboard.
- Log in (if necessary.)
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 LinkedIn OAuth app
- Go to LinkedIn Developer Dashboard.
- Click on
Create App
at the top right - Enter your
LinkedIn Page
andApp Logo
- Save your app
- Click
Auth
from the top menu - Add your
Redirect URL
to theAuthorized Redirect URLs for your app
section - Copy and save your newly-generated
Client ID
- Copy and save your newly-generated
Client Secret
Enter your LinkedIn 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
turnLinkedIn 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: 'LinkedIn',
})
Add this function which you can call from a button, link, or UI element.
async function signInWithLinkedIn() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'LinkedIn',
})
}
To log out:
async function signout() {
const { error } = await supabase.auth.signOut()
}