참조
https://supabase.com/docs/guides/auth/social-login/auth-google
구글 로그인으로 프로젝트 완성하기! 🚀
안녕하세요, 여러분! 오늘은 많은 사람들이 사용하고 있는 소셜 로그인 기능 중 하나인 구글 로그인을 프로젝트에 구현하는 방법을 공유하려고 해요. 우리가 사용할 도구는 바로 Supabase입니다. Supabase는 Firebase와 비슷하지만, 오픈소스라 더 자유롭게 커스터마이징할 수 있어요.
왜 구글 로그인을 써야 할까요?
여러분, 간단한 웹사이트 로그인 정보를 기억하기 귀찮지 않으신가요? 😅 저도 마찬가지로 매번 새 비밀번호를 기억하는 일은 넘나 귀찮은 일입니다. 그래서 많은 사이트가 소셜 로그인을 통해 사용자가 쉽게 로그인할 수 있도록 도와줍니다. 그 중에서도 구글 로그인은 매우 널리 사용되죠!
구글 로그인 구현의 전체 흐름
오늘 우리가 할 일은 크게 네 가지로 나눌 수 있습니다:
1. Supabase 클라이언트 초기화
2. 구글 소셜 로그인 버튼 추가
3. 로그인 상태 및 정보를 UI에 표시
4. 마지막으로, 유저가 어떤 소셜 프로바이더로 로그인했는지 확인
1. Supabase 클라이언트 초기화
먼저, Supabase 클라이언트를 초기화해야 합니다. createClient 함수를 사용해서 프로젝트 URL과 공개 키를 설정해줍니다.
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(
process.env.VITE_SUPABASE_URL,
process.env.VITE_SUPABASE_ANON_KEY
);여기서 VITE_SUPABASE_URL과 VITE_SUPABASE_ANON_KEY는 각각 여러분의 Supabase 프로젝트 URL과 공개 API 키입니다. .env 파일에 저장해두고 불러오면 좋겠죠?
2. 구글 소셜 로그인 버튼 추가
로그인 페이지에 구글 로그인 버튼을 추가해보겠습니다. Supabase의 Auth 컴포넌트를 사용하면 쉽게 소셜 로그인 버튼을 추가할 수 있습니다. 기존에 GitHub 로그인을 사용하고 있었다면, 다음과 같이 구글 로그인도 추가할 수 있어요.
import { Auth } from '@supabase/auth-helpers-react';
const Login = () => {
return (
<div id="auth-container">
<Auth
supabaseClient={supabase}
appearance={CustomTheme}
providers={['github', 'google']}
onlyThirdPartyProviders={true}
/>
</div>
);
};이렇게 하면 구글 로그인 버튼이 UI에 추가됩니다!
3. 로그인 상태 및 정보를 UI에 표시
로그인한 사용자의 정보를 UI에 보여주려면 상태 관리가 필요합니다. useState와 useEffect 훅을 사용해서 로그인 상태를 관리하고, 해당 상태를 UI에 반영하면 됩니다.
import React, { useState, useEffect } from 'react';
function App() {
const [session, setSession] = useState(null);
const [loading, setLoading] = useState(true);
const [social, setSocial] = useState(null);
useEffect(() => {
supabase.auth.getSession().then(({ data: { session } }) => {
setSession(session);
setLoading(false);
});
const { data: subscription } = supabase.auth.onAuthStateChange((_event, session) => {
setSession(session);
setLoading(false);
checkUserProvider().then((result) => {
if (result) {
setSocial(`logged in ${result.lastUsedProvider}`);
}
});
});
return () => subscription.unsubscribe();
}, []);
if (loading) return <p>Loading...</p>;
return (
<div className="App">
<Header title={"Your App Title"} />
{session ? (
<div className="social-info">
{social}
</div>
) : (
<div>Please log in</div>
)}
</div>
);
}이 코드를 통해 사용자가 로그인하면 해당 정보를 UI에 반영할 수 있습니다. 특히 useEffect 안에서 supabase.auth.getSession을 통해 현재 세션 정보를 얻고, 소셜 로그인 프로바이더 정보를 업데이트합니다.
4. 유저가 어떤 소셜 프로바이더로 로그인했는지 확인
마지막으로, 사용자가 어떤 소셜 프로바이더를 사용하여 로그인했는지 확인하는 기능을 구현해봅시다. 이는 checkUserProvider라는 유틸리티 함수를 통해 가능합니다.
import { supabase } from './App';
export async function checkUserProvider() {
const { data: { user } } = await supabase.auth.getUser();
if (user) {
const lastUsedProvider = user.identities?.[user.identities.length - 1]?.provider;
return { lastUsedProvider };
} else {
console.log('No user is currently logged in');
return null;
}
}이 함수는 현재 로그인한 사용자의 프로바이더 정보를 반환합니다. 이 정보를 통해 UI에 "Google로 로그인" 또는 "GitHub로 로그인"과 같은 메시지를 표시할 수 있습니다.
마무리
여기까지 따라오시느라 수고하셨습니다! 오늘 우리는 Supabase를 사용하여 구글 로그인을 구현해 보았습니다. 이제 여러분의 프로젝트도 멋지게 소셜 로그인 기능을 갖추게 되었네요. 이 외에도 Supabase는 다양한 기능을 제공하니, 더 많은 활용 방법을 찾아보시는 것도 좋을 것 같아요. Happy coding! 🎉
🔥 해당 포스팅은 Dev.POST 도움을 받아 작성되었습니다.
