برنامه نویسی

Supabase برای احراز هویت از چه چیزی استفاده می کند؟

در این مقاله، مکانیزم احراز هویت استفاده شده توسط Supabase را تحلیل می‌کنیم. ممکن است از Supabase Auth استفاده کرده باشید، اما آیا تا به حال فکر کرده اید که Supabase از چه چیزی برای احراز هویت استفاده می کند؟ خوب، بیایید دریابیم

توضیحات تصویر

ما باید از صفحه Signin شروع کنیم، این را می توان در فضای کاری استودیو پیدا کرد. Supabase یک monorepo است و شامل فضاهای کاری در پوشه برنامه ها است.

و بسته ها

بیایید SignInForm را انتخاب کنیم زیرا دارای احراز هویت مبتنی بر ایمیل و رمز عبور است. در خط 51، مؤلفه زیر را خواهید یافت:

import SignInForm from 'components/interfaces/SignIn/SignInForm'

<SignInForm />
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در فایل – SignIn/SignInForm.tsx، کد زیر را خواهید یافت:

<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="you@example.com"
          disabled={isSubmitting}
          autoComplete="email"
        />

        <div className="relative">
          <Input
            id="password"
            name="password"
            type="password"
            label="Password"
            placeholder="••••••••"
            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

در تابع onSignIn، auth.signInWithPassword فراخوانی می شود.

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 از وارد شده است lib/gotrue همانطور که در زیر نشان داده شده است:

import { auth, buildPathWithParams, getReturnToPath } from 'lib/gotrue'
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد زیر را در lib/gotrue برای تابع auth پیدا خواهید کرد.

import { getAccessToken, gotrueClient } from 'common'
export const auth = gotrueClient
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

auth تابعی به نام gotrueClient تخصیص می یابد و این تابع از 'common' وارد می شود. اینجا چه چیزی رایج است؟ آیا آن بسته npm دیگری است؟ نه…

Supabase یک monorepo است و دارای یک بسته به نام مشترک است. در Common/index.ts در خط 6، وارد کردن زیر را خواهید یافت:

export * from './gotrue'
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

gotrueClient

در خط 107، در common/gotrue.ts، کد زیر را خواهید یافت:

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 از وارد شده است @supabase/auth-js.

import { AuthClient, navigatorLock } from '@supabase/auth-js'
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

درباره supabase/auth-js@ بیشتر بخوانید.

در نتیجه، Supabase از کتابخانه خود برای احراز هویت استفاده می کند.

  1. ما پروژه های بزرگ منبع باز را مطالعه می کنیم و راهنماهای معماری رایگان ارائه می دهیم.

  2. ما کامپوننت‌های رایگان و قابل استفاده مجدد را توسعه داده‌ایم که با tailwind ساخته شده‌اند که می‌توانید در پروژه خود از آنها استفاده کنید.

  3. ما کدهای منبع باز را تجزیه و تحلیل می کنیم و دوره هایی را ارائه می دهیم تا بتوانید تکنیک های پیشرفته مختلف را یاد بگیرید و مهارت های خود را بهبود بخشید. دوره های ما را دریافت کنید

  4. در کانال یوتیوب ما مشترک شوید تا اطلاعاتی از پروژه های منبع باز دریافت کنید، جایی که ما قطعه کد را بررسی می کنیم.

توضیحات تصویر

  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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا