Skip to main content

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:

Steps​

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​

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()
}

Resources​