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 your notion integration#

notion.so

  • 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.

notion.so

Add the redirect URI#

  • After selecting "Public integration", you should see an option to add "Redirect URIs".

notion.so

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 full OAuth 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.

notion.so

  • 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 the Authentication Settings page
  • Under External OAuth Providers turn Notion Enabled to ON
  • Enter the "OAuth client ID" and "OAuth client secret" obtained in the client id and client secret fields.
  • Click Save

Add login code to your client app#

When your user signs in, call signInWithOAuth() with notion as the provider:

1async function signInWithNotion() {
2  const { data, error } = await supabase.auth.signInWithOAuth({
3    provider: 'notion',
4  })
5}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

1async function signout() {
2  const { error } = await supabase.auth.signOut()
3}

Resources#