Login with Notion
To enable Notion Auth for your project, you need to set up a Notion Application and add the Application OAuth credentials to your Supabase Dashboard.
Overview
Setting up Notion logins for your application consists of 3 parts:
- Create and configure a Notion Application Notion Developer Portal
- Retrieve your OAuth client ID and OAuth client secret and add them to your Supabase Project
- Add the login code to your Supabase JS Client App
Steps
Create your notion integration
- Go to developers.notion.com.
- Click "View my integrations" and login.
- Once logged in, go to notion.so/my-integrations and create a new integration.
- When creating your integration, ensure that you select "Public integration" under "Integration type" and "Read user information including email addresses" under "Capabilities".
- You will need to add a redirect uri, see Add the redirect uri
- Once you've filled in the necessary fields, click "Submit" to finish creating the integration.
Add the redirect uri
- After selecting "Public integration", you should see an option to add "Redirect URIs".
You can retrieve the redirect uri with the following steps:
- 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. - Add
/auth/v1/callback
to the end of that to get your fullOAuth Redirect URI
.
Your redirect uri should look like the following: https://<project-ref>.supabase.co/auth/v1/callback
Add your Notion credentials into your Supabase Project
- Once you've created your notion integration, you should be able to retrieve the "OAuth client ID" and "OAuth client secret" from the "OAuth Domain and URIs" tab.
- 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 - Under
External OAuth Providers
turnNotion Enabled
to ON - Enter the "OAuth client ID" and "OAuth client secret" obtained in the
client id
andclient secret
fields. - 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: 'notion',
})
Add this function which you can call from a button, link, or UI element.
async function signInWithNotion() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'notion',
})
}
To log out:
async function signout() {
const { error } = await supabase.auth.signOut()
}