dev-resources.site

for different kinds of informations.

What does Supabase use for its Authentication?

Published at

12/25/2024

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="[email protected]"
          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'

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on an interesting project. Send me an email at [email protected]

My Github - https://github.com/ramu-narasinga
My website - https://ramunarasinga.com
My Youtube channel - https://www.youtube.com/@thinkthroo
Learning platform - https://thinkthroo.com
Codebase Architecture - https://app.thinkthroo.com/architecture
Best practices - https://app.thinkthroo.com/best-practices
Production-grade projects - https://app.thinkthroo.com/production-grade-projects