Now Reading
SSO, Cell, and Server-side help

SSO, Cell, and Server-side help

2023-04-13 08:38:28

Supabase Auth: SSO,  Mobile, and Server-side support

At this time we’re excited to announce just a few new options for Supabase Auth:

  1. Easily add Single Sign-On support to your projects using SAML 2.0
  2. Better support for server-side rendering and mobile apps using PKCE
  3. Native Apple login on iOS

Single Signal-On Assist utilizing SAML 2.0

With Single Signal-On (SSO), your customers can login with their firm’s id supplier (IDP), a important characteristic if you’re constructing purposes for Enterprises.

Each developer constructing a B2B utility finally wants the SSO authentication circulate to onboard enterprise prospects. SSO is a requirement for bigger Enterprise prospects as a result of it is a normal request in Enterprise Safety Insurance policies. Over the previous few months, we have been dogfooding SSO for our own Enterprise customers, and as we speak we’re releasing it so that you can do the identical.

Constructing SSO into your utility is not essentially arduous, however does include some complexity. Loads of time may be spent understanding the nuances and particulars of the protocol – from dissecting the jargon to testing the implementation closely. It took us months to construct it for ourselves. With this launch, you’ll have SSO arrange and operating in lower than an hour in an effort to give attention to transport the core options of your product. This characteristic is on the market for the Pro-tier and above, beginning as we speak. This may also be obtainable on the self-hosted model.

Getting Began with SAML 2.0

To get began, allow the “SAML 2.0“ authentication method in the dashboard. We have added new instructions to the Supabase CLI to assist with the configuration course of:

$ supabase sso --assist
Handle Single Signal-On (SSO) authentication for initiatives

  supabase sso [command]

Accessible Instructions:
  add         Add a brand new SSO id supplier
  information        Returns the SAML SSO settings required for the id supplier
  record        Checklist all SSO id suppliers for a challenge
  take away      Take away an current SSO id supplier
  present        Present details about an SSO id supplier
  replace      Replace details about an SSO id supplier

As soon as you have added a brand new SSO id supplier to your challenge, it is so simple as calling the signInWithSSO() from the supabase-js library:

const { information } = await supabase.auth.signInWithSSO({ area: 'acme.corp' })

if (information.url) window.location.href = information.url

SSO with Row Degree Safety and multi-tenancy

As traditional, we have engineered this characteristic across the wonderful capabilities of PostgreSQL.

For instance, you should utilize Row Degree Safety (RLS) to construct multi-tenant purposes, just by utilizing the supplier’s distinctive identifier within the person’s JWT:

create coverage "Solely permit read-write entry to tenants" on tablename as restrictive to authenticated utilizing (
  tenant_id = (auth.jwt () -> 'app_metadata' ->> 'supplier')

The journey to enterprise readiness is not an finish objective, it’s a steady course of that calls for fixed consideration and upkeep. With Supabase Auth, your staff can offload this engineering burden to us and prioritize the options that matter.

Server-Aspect and Cell Auth

Many builders as we speak are utilizing Supabase to construct cellular apps, and server-side rendering is turning into widespread (once more!). This launch will add help for these use circumstances by introducing the Proof Key for Code Change circulate (PKCE) authentication circulate. This improves safety for cellular apps and makes constructing server-first apps easy. Since this can be a main replace that touches most of the authentication routes, we will probably be rolling it out regularly over the subsequent few weeks.

A short historical past of Supabase Auth

Once we launched Supabase Auth, our goal was JAMstack builders. In these circumstances, the protocol used between the person’s utility and Supabase Auth is called the Implicit Grant Flow:

diagram reference

As builders constructed extra complicated apps, they encountered two issues with this authentication circulate:

  • Server-Aspect E-mail Verification Hyperlinks
    Knowledge supplied in a URL fragment is simply accessible in a browser surroundings, not on the server. That is problematic for e-mail verification hyperlinks that redirect customers to a server-side route.
  • Challenges with Cell App Authentication
    The implicit grant circulate raised safety issues for cellular use circumstances since malicious apps could potentially obtain the user session.

Server-side auth unlocks a number of advantages. Builders can:

  • Set cookies on the identical area as the appliance.
  • Allow server-side rendering for protected pages.
  • Carry out downstream actions after person authentication, corresponding to including the person to a CRM or sending analytics.

Introducing PKCE

To resolve these issues, we’re introducing help for the Proof Key for Code Change circulate (PKCE, pronounced “pixy”).

The PKCE circulate introduces a code verifier (a randomly generated secret) and a code problem (the hash of the code verifier). The authorization code is returned as a question parameter so it is accessible on the server. Through the PKCE circulate:

  1. The code problem is distributed to Supabase Auth, which returns an authorization code.
  2. The consumer sends the authorization code along with the code verifier to acquire the person’s session.
  3. Supabase Auth checks if the code verifier matches the code problem despatched earlier by computing the hash. This renders a malicious attacker’s try to intercept the authorization code ineffective, since they should know the worth of the code verifier as nicely.

diagram reference

Migrating to PKCE on the consumer

Over the subsequent few weeks, you can use it with the Supabase libraries. We have already added PKCE to the JavaScript consumer library and our auth-helpers library. If you happen to’re utilizing supabase-js , you’ll be able to change to PKCE by initializing your consumer with the next possibility:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  auth: {
    flowType: 'pkce',

For client-side auth, that is all it’s worthwhile to do to modify over. supabase-js will deal with the era and storage for the code verifier, in addition to exchanging the authorization code for the person’s session.

Migrating to PKCE on the server

Server-side authentication is now so much simpler. Let’s take a look at an instance utilizing NextJS.

Set up the subsequent model of auth-helpers (lets use the nextjs model for this instance)

npm set up @supabase/auth-helpers-nextjs@subsequent

Then put together an endpoint for the sign up course of. The redirect URL is about to /api/auth/callback, which will probably be carried out subsequent.

See Also

// api/auth/login
import { NextApiRequest, NextApiResponse } from 'subsequent'
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'

export default async operate handler(req: NextApiRequest, res: NextApiResponse) {
  // Create the Supabase Shopper
  const supabase = createServerSupabaseClient(
    { req, res },
      supabaseUrl: course of.env.SUPABASE_URL,
      supabaseKey: course of.env.SUPABASE_ANON_KEY,

  // Begin sign up with one-time password
  const { error } = await supabase.auth.signalInWithOtp({
    e-mail: '',
    choices: {
      emailRedirectTo: 'http://localhost:3000/api/auth/callback',

  if (error) {


Now we will arrange the callback API endpoint:

// api/auth/callback
import { NextApiRequest, NextApiResponse } from 'subsequent'
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'

export default async operate handler(req: NextApiRequest, res: NextApiResponse) {
  // Create authenticated Supabase Shopper
  const supabase = createServerSupabaseClient(
    { req, res },
      supabaseUrl: SUPABASE_URL,
      supabaseKey: SUPABASE_ANON_KEY,
  // verify for code in url querystring
  const code = req.question.code

  if (typeof code === 'string') {
    // change the auth code for person session
    await supabase.auth.exchangeCodeForSession(code)

  // redirect the person to a server-side protected space in your app

Roll out

Since this can be a main replace that touches most of the authentication routes, we are going to roll it out regularly over the subsequent few weeks. You’ll obtain a notification in your dashboard when the characteristic is on the market on your challenge. Attain out to us if you would like early entry to this characteristic.

Native Apple login on iOS

Whereas PKCE help is nice, that’s not the one information for you cellular app builders on the market.

Constructing apps for iOS requires 1 help for native Sign up with Apple. We heard the neighborhood’s requests for native sign-in. We hope you be a part of our pleasure to formally announce help for native Sign up with Apple.

Your app’s iOS Bundle ID can now be configured within the Apple supplier part of your challenge’s dashboard.


That is the one prerequisite for triggering a local Sign up with Apple. With supabase-flutter, that is as straightforward as:

ultimate AuthResponse response = await supabase.auth.signInWithApple();

It is that straightforward! No have to arrange deep hyperlinks, no have to move any parameters.

We’re simply beginning with Apple login, and shortly add help for Google login.

Wrapping Up

Supabase Auth goals to proceed creating auth options which might be safe by default but easy to implement. We use Supabase Auth for our hosted platform and constantly dogfood the newest model on it. In case you are emigrate to Supabase Auth, you’ll be able to take a look at this weblog put up on how Parqet migrated 125,000 users from Auth0 to Supabase Auth.

Source Link

What's Your Reaction?
In Love
Not Sure
View Comments (0)

Leave a Reply

Your email address will not be published.

2022 Blinking Robots.
WordPress by Doejo

Scroll To Top