수파베이스를 통한 빠르고 쉬운 인증

Supabase은 프로젝트에 대한 모든 백엔드 서비스를 제공하는 오픈 소스 Firebase 대안입니다. 모든 서비스를 서로 독립적으로 사용할 수 있습니다. 오늘은 React 애플리케이션에 대한 인증을 통합하는 방법을 살펴보겠습니다.

이 게시물은 Supabase 인증을 실험하기 위해 개인적으로 구축한 샘플 프로젝트Social Providers를 기반으로 작성되었습니다.

들어가기 전에 인증 시스템이 필요한 이유에 대해 논의해 봅시다.

인증과 권한 부여

가장 기본적인 수준에서 사용자가 웹사이트 또는 애플리케이션에서 리소스를 요청할 때(페이지를 방문하는 것처럼 간단할 수 있음) 우리는 (a) 이 사람이 누구인지, (b) 무엇을 허용할지 알아야 합니다. 그들이 할? 간단히 말해서 인증과 권한 부여의 차이입니다.

대체로 우리는 사용자가 누구인지에 따라 무엇을 할 수 있는지 결정할 수 있고/해야 하며, 이를 달성하는 가장 쉬운 방법은 프로세스의 일부를 지원하는 인증 서비스를 구현하는 것입니다. 따라서 Supabase Authentication을 사용하여 빌드된 React 애플리케이션에서 소셜 공급자에 대한 지원을 사용하여 Next.js 기회를 주고 싶었습니다.

수파베이스 시작하기

우선은 우선입니다. 응용 프로그램이 준비되면. 다음 명령으로 설치되는 하나의 종속성만 필요합니다. npm i @supabase/supabase-js . 그런 다음 createClient() 방법을 사용하여 새 Supabase 클라이언트를 초기화해야 합니다.

두 가지parameters를 전달해야 합니다. (1) Supabase URL 및 (2) Supabase 키. 이것을 별도의 파일로 추출했습니다.

import { createClient } from "@supabase/supabase-js";

export default createClient(
    `${process.env.NEXT_PUBLIC_SUPABASE_PROJECT_URL}`,
    `${process.env.NEXT_PUBLIC_SUPABASE_API_KEY}`
);

사용자 등록

기본적으로 수파베이스는 signIn() 방식으로 third-party OAuth providers을 사용합니다. 이 메서드는 user , session 및 error 개체에 대한 액세스를 제공합니다. 이를 위해 필요한 코드는 다음과 같습니다.

const { user, session, error } = await supabase.auth.signIn({
  // provider can be 'github', 'google', 'gitlab', and more
  provider: 'github'
})

또한 사용자를 /welcome 페이지로 리디렉션하려면 두 번째 매개변수 유형object을 url: signIn() 을 포함하는 { redirectTo: '/' } 메서드에 전달할 수 있습니다.

데모 프로젝트Social Providers에서 내가 설정한 방법을 확인할 수 있습니다.

React 및 Supabase 사용

샘플 프로젝트에서 다음과 같이 onClick 메서드를 처리하는 signIn() 함수가 있는 버튼을 추가했습니다.

<button onClick={() => auth("google")}>
  Continue with Google
</button>
<button onClick={() => auth("github")}>
  Continue with Google
</button>

사용자가 클릭하는 인증 옵션에 따라 공급자를 변경하는 기능을 용도 변경했습니다. 핸들러 함수는 다음과 같습니다.

/* I've chosen not to add the user, session and error objects for simplicity */
const auth = async (provider: Provider) => {
    await supabase.auth.signIn({
        provider: `${provider}`,
    });
};

사용자가 성공적으로 인증되면 Supabase 내에서 프로젝트의 URL로 구성된 URL 또는 signIn() 메서드에서 구성된 URL로 리디렉션됩니다.

사용자 정보를 캡처하고 로드하기 위해 애플리케이션에 대한 정보를 수집하고 상태에 저장하는 user() 메서드를 사용하여 핸들러 함수를 추가했습니다.

useEffect(() => {
    const getUser = () => {
        const supabaseUser = supabase.auth.user();
        setUser(supabaseUser);
    };
    window.addEventListener("hashchange", function () {
        getUser();
    });
    getUser();
}, [user]);

그래서 그들은 무엇을 사용하고 있습니까?

인증 서비스 및 공급자에 따라 다릅니다. 샘플 프로젝트는 Supabase를 사용하여 인증을 처리하고 놀랍게도 다른 인증 서비스에 비해 사용자에 관한 정보를 거의 캡처하지 않습니다. 다음은 user_metadata 개체의 모양에 대한 예입니다.

{
    avatar_url: "https://avatars.githubusercontent.com/u/{..}",
    email: "[email protected]",
    email_verified: true,
    full_name: "Hector Sosa",
    iss: "https://api.github.com",
    name: "Hector Sosa",
    preferred_username: "ekqt",
    provider_id: "{...}",
    sub: "{...}",
    user_name: "ekqt",
}

결론

많은 인증 서비스가 있습니다. 실험을 통해 애플리케이션과 얼마나 잘 통합되는지, 개발자 경험이 얼마나 좋은지 확인하고 프로젝트 요구 사항에 가장 적합한 것이 무엇인지 확인하는 것이 가장 좋습니다.

가장 인기 있는 솔루션은 다음과 같습니다. Google's Firebase , Auth0 , Next-Auth , Magic 문서를 살펴보고 즐거운 인증을 받으세요!