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 از کتابخانه خود برای احراز هویت استفاده می کند.
-
ما پروژه های بزرگ منبع باز را مطالعه می کنیم و راهنماهای معماری رایگان ارائه می دهیم.
-
ما کامپوننتهای رایگان و قابل استفاده مجدد را توسعه دادهایم که با tailwind ساخته شدهاند که میتوانید در پروژه خود از آنها استفاده کنید.
-
ما کدهای منبع باز را تجزیه و تحلیل می کنیم و دوره هایی را ارائه می دهیم تا بتوانید تکنیک های پیشرفته مختلف را یاد بگیرید و مهارت های خود را بهبود بخشید. دوره های ما را دریافت کنید
-
در کانال یوتیوب ما مشترک شوید تا اطلاعاتی از پروژه های منبع باز دریافت کنید، جایی که ما قطعه کد را بررسی می کنیم.
-
https://github.com/supabase/supabase/blob/master/apps/studio/pages/sign-in.tsx
-
https://github.com/supabase/supabase/blob/master/apps/studio/pages/sign-in.tsx#L51
-
https://github.com/supabase/supabase/tree/master/packages
-
https://github.com/supabase/supabase/blob/master/packages/common/index.tsx
-
https://www.npmjs.com/package/@supabase/auth-js