feat: kakao oauth 연동 (test 앱)

- next auth 설정 - Header 로그인 버튼 -> 로그인 페이지 ref #36
nolmungshemung · Feb 15, 2022 · 9a41e65 · 9a41e65
1 parent ffee5ca
commit 9a41e65
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 23 deletions.
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -1,5 +1,6 @@
 import { AppBar, Text, Button, Box, styled } from '@nolmungshemung/ui-kits';
 import Router from 'next/router';
+import { signIn, signOut, useSession } from 'next-auth/react';
 
 const HeaderButton = styled(Button, {
   width: '5rem',
@@ -10,6 +11,7 @@ const HeaderButton = styled(Button, {
 });
 
 export function Header() {
+  const { data: sessionData } = useSession();
   const handleRouting = (path: string) => {
     Router.push(path);
   };
@@ -35,24 +37,35 @@ export function Header() {
         Writing Hub
       </Text>
       <Box>
-        {/* TODO: 로그인 세션에 따라서 다르게 처리하도록 수정 필요 */}
-        {/* <HeaderButton size="lg" color="white" outline="black">
-          필명등록
-        </HeaderButton>
-        <HeaderButton size="lg" color="white" outline="black">
-          로그아웃
-        </HeaderButton>
-        <HeaderButton size="lg" color="white" outline="black">
-          내피드
-        </HeaderButton> */}
-        <HeaderButton
-          size="lg"
-          color="white"
-          outline="black"
-          onClick={() => handleRouting('/login')}
-        >
-          로그인
-        </HeaderButton>
+        {sessionData && (
+          <>
+            <HeaderButton size="lg" color="white" outline="black">
+              필명등록
+            </HeaderButton>
+            <HeaderButton size="lg" color="white" outline="black">
+              내피드
+            </HeaderButton>
+          </>
+        )}
+        {sessionData ? (
+          <HeaderButton
+            size="lg"
+            color="white"
+            outline="black"
+            onClick={signOut}
+          >
+            로그아웃
+          </HeaderButton>
+        ) : (
+          <HeaderButton
+            size="lg"
+            color="white"
+            outline="black"
+            onClick={signIn}
+          >
+            로그인
+          </HeaderButton>
+        )}
       </Box>
     </AppBar>
   );

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,6 +7,7 @@ import { globalCss, Box } from '@nolmungshemung/ui-kits';
 import { reset } from 'stitches-reset';
 import { DefaultSeo } from 'next-seo';
 import { Header } from '~/components/layout';
+import { SessionProvider } from 'next-auth/react';
 
 globalCss({
   ...reset,
@@ -34,7 +35,7 @@ queryClient.setDefaultOptions({
   },
 });
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   return (
     <>
       <DefaultSeo />
@@ -46,10 +47,12 @@ function MyApp({ Component, pageProps }: AppProps) {
       </Head>
       <QueryClientProvider client={queryClient}>
         <Hydrate state={pageProps.dehydratedState}>
-          <Box css={{ height: '100%' }}>
-            <Header />
-            <Component {...pageProps} />
-          </Box>
+          <SessionProvider session={session}>
+            <Box css={{ height: '100%' }}>
+              <Header />
+              <Component {...pageProps} />
+            </Box>
+          </SessionProvider>
           <ReactQueryDevtools initialIsOpen={false} />
         </Hydrate>
       </QueryClientProvider>

diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts
@@ -0,0 +1,19 @@
+/* This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.
+https://next-auth.js.org/getting-started/example#add-api-route
+*/
+import NextAuth from 'next-auth';
+import Kakao from 'next-auth/providers/kakao';
+
+export default NextAuth({
+  providers: [
+    Kakao({
+      clientId: process.env.KAKAO_ID || '',
+      clientSecret: process.env.KAKAO_SECRET || '',
+    }),
+  ],
+  secret: process.env.NEXTAUTH_SECRET,
+  pages: {
+    signIn: '/login',
+    signOut: '/login',
+  },
+});
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -1,6 +1,9 @@
 import type { NextPage } from 'next';
 import { NextSeo } from 'next-seo';
 import { Box, Text, Button, styled } from '@nolmungshemung/ui-kits';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
 
 const GuideText = styled(Text, {
   color: '$gray',
@@ -9,6 +12,14 @@ const GuideText = styled(Text, {
 });
 
 const Login: NextPage = function () {
+  const router = useRouter();
+  const { callbackUrl: urlParam } = router.query;
+
+  const onLoginButtonClick = useCallback(() => {
+    const callbackUrl = typeof urlParam === 'object' ? urlParam[0] : urlParam;
+    signIn('kakao', { callbackUrl });
+  }, [urlParam]);
+
   return (
     <>
       <NextSeo
@@ -39,6 +50,7 @@ const Login: NextPage = function () {
               borderRadius: '15px',
               backgroundColor: '#F4DC01',
             }}
+            onClick={onLoginButtonClick}
           >
             <Text size="xl" css={{ fontWeight: '$bold' }}>
               카카오톡 로그인