What does Supabase use for its Authentication?

In this article, we analyse the authentication mechanism Supabase uses. You may have used Supabase Auth, but have you ever wondered what Supabase uses for its authentication? well, let’s find out.

signin.tsx

We have to start at Signin page, this can be found in studio workspace. Supabase is a monorepo and contains workspaces in apps folder.

and packages.

Let’s pick SignInForm as it has email and password based authentication. At line 51,, you will find the below component:

import SignInForm from 'components/interfaces/SignIn/SignInForm'
…
<SignInForm />

SignInForm.tsx

In the file — SignIn/SignInForm.tsx, you will find the below code:

<Form
  validateOnBlur
  id="signIn-form"
  initialValues={{ email: '', password: '' }}
  validationSchema={signInSchema}
  onSubmit={onSignIn}
>
  {({ isSubmitting }: { isSubmitting: boolean }) => {
    return (
      <div className="flex flex-col gap-4">
        <Input
          id="email"
          name="email"
          type="email"
          label="Email"
          placeholder="[e-mail]"
          disabled={isSubmitting}
          autoComplete="email"
        />

        <div className="relative">
          <Input
            id="password"
            name="password"
            type="password"
            label="Password"
            placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
            disabled={isSubmitting}
            autoComplete="current-password"
          />

          {/* positioned using absolute instead of labelOptional prop so tabbing between inputs works smoothly */}
          <Link
            href="/forgot-password"
            className="absolute top-0 right-0 text-sm text-foreground-lighter"
          >
            Forgot Password?
          </Link>
        </div>

        <div className="self-center">
          <HCaptcha
            ref={captchaRef}
            sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
            size="invisible"
            onVerify={(token) => {
              setCaptchaToken(token)
            }}
            onExpire={() => {
              setCaptchaToken(null)
            }}
          />
        </div>

        <LastSignInWrapper type="email">
          <Button
            block
            form="signIn-form"
            htmlType="submit"
            size="large"
            disabled={isSubmitting}
            loading={isSubmitting}
          >
            Sign In
          </Button>
        </LastSignInWrapper>
      </div>
    )
  }}
</Form>

onSignIn function

In the onSignIn function, auth.signInWithPassword is called.

const onSignIn = async ({ email, password }: { email: string; password: string }) => {
    const toastId = toast.loading('Signing in...')

    let token = captchaToken
    if (!token) {
      const captchaResponse = await captchaRef.current?.execute({ async: true })
      token = captchaResponse?.response ?? null
    }

    const { error } = await auth.signInWithPassword({
      email,
      password,
      options: { captchaToken: token ?? undefined },
    })
    ...
  }

auth is imported from lib/gotrue as shown below:

import { auth, buildPathWithParams, getReturnToPath } from 'lib/gotrue'

auth in lib/gotrue

You will find the below code in lib/gotrue for the auth function.

import { getAccessToken, gotrueClient } from 'common'
export const auth = gotrueClient

auth is assigned a function named gotrueClient and this is imported from ‘common’. What’s common here? is that another npm package? no…

common package

Supabase is a monorepo and has a package named common. In the common/index.ts at line 6, you will find the below import:

export * from './gotrue'

gotrueClient

At line 107, in common/gotrue.ts, you will find this below code:

export const gotrueClient = new AuthClient({
  url: process.env.NEXT_PUBLIC_GOTRUE_URL,
  storageKey: STORAGE_KEY,
  detectSessionInUrl: shouldDetectSessionInUrl,
  debug: debug ? (persistedDebug ? logIndexedDB : true) : false,
  lock: navigatorLockEnabled ? navigatorLock : undefined,
})

AuthClient is imported from @supabase/auth-js.

import { AuthClient, navigatorLock } from '@supabase/auth-js'

Read more about @supabase/auth-js.

In conclusion, Supabase uses its own library for its authentication.

About us:

1. We study large open source projects and provide free architectural guides.

2. We have developed free, reusable Components, built with tailwind, that you can use in your project.

3. We analyse open-source code and provide courses so you can learn various advanced techniques and improve your skills. Get our courses.

4. Subscribe to our Youtube Channel to get the insights from the open-source projects, where we review code snippets.

References:

1. https://github.com/supabase/supabase/blob/master/apps/studio/pages/sign-in.tsx

2. https://github.com/supabase/supabase/blob/master/apps/studio/pages/sign-in.tsx#L51

3. https://github.com/supabase/supabase/tree/master/packages

4. https://github.com/supabase/supabase/blob/master/packages/common/index.tsx

5. https://www.npmjs.com/package/@supabase/auth-js