다음 인증을 사용하여 Next.js에서 인증 구현

이 게시물에서는 NextAuth.js를 사용하여 Next JS에서 GitHub, Twitter 및 이메일 인증을 구현합니다.

다음 인증이란 무엇입니까?

NextAuth.js는 Next.js 응용 프로그램을 위한 완전한 오픈 소스 인증 솔루션입니다. 클라이언트 쪽에서 사용자에 액세스할 수 있는 기본 제공 후크가 있습니다.

시작하기

다음 js 프로젝트를 잘못 생성/시작했다고 가정합니다. 그렇지 않은 경우 실행yarn create next-app하여 다음 js 상용구 코드

를 생성하세요.

이제 yarn add next-auth 또는 npm install next-auth를 실행하여 next-auth를 설치할 수 있습니다.

이제 pages/api/auth/[...nextauth].js 파일을 편집하여 인증을 위한 API 경로를 생성할 수 있습니다.

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here
  ],
}

export default NextAuth(authOptions)

자바스크립트

데이터베이스인 공급자가 필요할 수 있습니다. 이 경우 MongoDB

를 사용합니다.

이제 구성 요소pages/_app.jsx를 SessionProvider로 래핑하여 클라이언트 측에서 사용자에 액세스할 수 있습니다.

import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

자바스크립트

이제 편집하여 간단한 홈페이지를 만들어 보겠습니다. pages/index.js

import { Center, VStack, Text, Button } from '@chakra-ui/react';
import { useSession, signIn } from 'next-auth/react';
import React from 'react';

export default function Home() {
    const { data } = useSession();
    return (
        <Center height="100%" my={'10rem'}>
            <VStack>
                <Text fontSize={'2xl'}>
                    Current User: {data?.user?.email || 'None'}{' '}
                </Text>

                {!data?.user && <Button onClick={() => signIn()}>Login</Button>}
            </VStack>
        </Center>
    );
}

자바스크립트

사용자가 GitHub, discord와 같은 OAuth 공급자를 사용하여 로그인/등록할 수 있는 인증 페이지(pages/auth.js)를 생성해 보겠습니다

.

import {
    Box,
    Center,
    Container,
    Flex,
    Icon,
    VStack,
    Button,
} from '@chakra-ui/react';
import {
    getProviders,
    getSession,
    GetSessionParams,
    signIn,
    useSession,
} from 'next-auth/react';
import { FcGoogle } from 'react-icons/fc';
import { FaDiscord, FaGithub } from 'react-icons/fa';
import { GetServerSideProps } from 'next';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
export default function SignIn({ providers }) {
    const router = useRouter();
    const user = useSession();
    useEffect(() => {
        // if (router.query.callbackUrl) {
        // router.push(router.query.callbackUrl as string);
        // }
        if (user?.data?.user) {
            router.push('/');
        }
    });
    let icons = [
        {
            name: 'Google',
            icon: FcGoogle,
        },
        {
            name: 'Github',
            icon: FaGithub,
        },
        {
            name: 'Discord',
            icon: FaDiscord,
        },
    ];
    return (
        <Flex h="100vh" alignItems={'center'} justifyContent="center">
            <Box
                border="1px"
                borderColor="gray.200"
                p={4}
                rounded="xl"
                // translateY={'50%'}
            >
                <VStack>
                    {Object.values(providers).map((provider: any) => (
                        <Button
                            leftIcon={
                                <Icon
                                    as={
                                        icons.find(
                                            (i) =>
                                                i.name.toLowerCase() ===
                                                provider.name.toLowerCase()
                                        ).icon
                                    }
                                />
                            }
                            onClick={async () => signIn(provider.id)}
                            key={provider.id}
                        >{`Sign in with ${provider.name}`}</Button>
                    ))}
                </VStack>
            </Box>
        </Flex>
    );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
    const session = await getSession(context);
    const providers = await getProviders();
    // console.log(context.query);
    if (session) {
        return {
            redirect: {
                destination: (context?.query?.callbackUrl as string) || '/',
                permanent: false,
            },
        };
    }
    return {
        props: { providers },
    };
};

자바스크립트

useSession() 후크를 사용하여 클라이언트 측에서 사용자 세부 정보를 얻거나 서버 측

에서 getSession()를 사용할 수 있습니다.


고객 입장에서

import { useSession } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()

  if (status === "authenticated") {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

서버 측

async function myFunction() {
  const session = await getSession() 
  /* ... */
}

이제 다음 js 사이트에 인증을 성공적으로 추가했습니다. 이제 실행할 수 있고yarn dev dev 서버가 실행되기 시작할 수 있습니다

.

결론

Chakra UI 라이브러리를 사용하여 프런트엔드 스타일을 지정했습니다

.

전체 소스 코드는 GitHub에서 사용할 수 있습니다.

P.S:- Vultr (이 링크를 사용하여 등록하면 $100 크레딧을 받을 수 있습니다.)는 훌륭한 호스팅 선택입니다.