next.js + AWS amplify auth login

Next.js/nextauth

next.js + AWS amplify auth login

방피터 2022. 6. 21. 17:13

next.js에다가 aws amplify auth로 로그인을 구현해보자구. google부터 해볼거야. 나머지는 뭐 똑같겠지. 난 새로운 이메일 계정으로 aws 새로 가입해서 처음부터 시작했어. 새로 만들고 amplify 들어가면 누를 수 있는게 -_- 시작하기 두개 뿐이 없어. 지금 호스팅을 할건 아니니까 amplify studio 시작하기 버튼 클릭.

이제 앱 이름 각자 넣고 confirm deployment 클릭.

그리고 나면 몇분 동안 amplify 설정을 해. 조금 기다려주자 ㅋ

완료가 되면 아래와 같이 대쉬보드가 나오는데.. 이것 저것 살펴보자 ㅋㅋ 하지만 당신이 누를 수 있는 건 backend environments의 studio 시작 버튼 뿐이 없어 ㅋㅋㅋ 의심하지 말고 눌러보자.

이제 amplify studio를 볼 수 있어. 여기서 또 뭐 누를 수 있는게 없더라고 ㅋㅋ 그래서 create data model 클릭.

그러면 바로 모델을 만드는 화면이 나오는데 여기에 데이터 모델부터 넣어야 하나봐.. 왜인지...는 몰라 ㅋ +Add model을 눌러서 데이터 모델을 추가를 해보자고 다음에 어떻게 되는지.

난 아래처럼 👇 추가했어. user 관리를 cognito가 해주는 걸로 알고는 있는데.. 음 일단 마땅히 넣을게 없어서 Users 라는 모델을 넣어봤어. 모델은 첫글자가 대문자여야만 해 users는 안됨. 그리고 field 이름 넣고 타입을 지정하면 되는데 특이한 건 AWSURL 뭐 이런게 있네ㅎ 그리고 해당 데이터가 필수인지 아니면 array인지 선택하는 것들이 있는데 이런 것들은 나중에 해보자고.

이렇게 입력하고 graphql schema를 눌러보면 아래처럼 graphql schema형태로 볼 수 있어. save and deploy 눌러 배포.

deploy되도록 놔두고 우린 계속 가자고. 왼쪽 메뉴 Set up -> Authentication 화면에서 add login mechaism 클릭해서 구글 추가하자. 👇👇

그러면 아래와 같이 web client id 와 web client secret을 입력하는 칸이 나오는데 이 두 가지 정보는 GCP 사용자 인증정보에서 가져올 수 있어. 그리고 redirect URL은 카피해서 GCP 사용자 인증 정보에 입력해야함.

아래는 GCP 사용자 인증 정보 화면.👇👇 우측에 클라이언트 ID, secret 다 있고 하단에 승인된 리디렉션 URI 입력하는 곳 있고.

다 입력했으면 gcp 사용자 인증 정보에서 저장 잘 누르고~ 그리고 amplify에서 sign-in & sign-out redirect URLs를 입력해줘야 하는데 Sign-in Sign-out하고 나면 redirect할 URL을 말하는 거지. 뭘 해야 하는지 확실하게 모르니까 일단 지금은 localhost로 해두자고..

중요 - https://localhost:3000 하면 안됨. http://localhost:3000 해야 함. dev에 SSL 따윈 없으니까 ㅎㅎ

그리고 amplify setting 화면에서 더 내려가면 Configure sign up이 보이는데 이건 google한테 요청할 자료들 말하는 거야. 그거 왜 본적 있잖아. 어떤 앱이 어떤 권한이나 어떤 데이터를 요청하는데 승인하시겠습니까? 뭐 그런거. 거기에 요청할 데이터들 말하는 거임. 그리고 그 아래는 기본적인 비번 설정 룰이랑, 확인 메세지 email로 할건지 문자로 할건지, 그리고 메세지 내용은 뭘로 할 건지 지정하는 부분이 있는데 마찬가지로 지금은 그냥 default로 두자고. 끝났으면 deploy!!

이제 여기까지 설정은 끝났고 코드 넣어줘야지~~ 우선 아래 페이지 참고해서 amplify cli 부터 설치해야 해.👇👇

https://docs.amplify.aws/cli/start/install/

docs.amplify.aws

cli설치가 끝났으면 해당 폴더에서 amplify pull 명령으로 프로젝트 configuration을 땡겨와야 해. 메뉴얼에는 amplify init을 하라고 되어 있는데 이건 새로운 amplify project를 생성하는 거야. 하면 안된다~ 그리고 이 과정을 할 때 로그인도 해야하고 IAM에 사용자 등록 안되어 있는 사람들은 사용자 등록 -> key 생성 등등 해야 해. 이 부분에서 약간 드러운게 있는데 조금만 참고 해보자 ㅋㅋ

amplify pull

잘 하고나면 루트 폴더에 amplify 폴더 하나가 생성되고 src 폴더에는 models 폴더와 aws-export.js 파일도 하나씩 생성되는 걸 확인할 수 있어. aws-export.js에는 아까 만들어둔 amplify 프로젝트 정보들이 있어. 이걸 가지고 로그인을 할거야.

이제 amplify react 라이브러리를 next.js 프로젝트 폴더에서 아래 커맨드로 설치.

yarn add aws-amplify @aws-amplify/ui-react

(참고) 이래저래 하다보니 메뉴얼이 약간.. 뭐랄까.. 난리 브루스, 이쪽 저쪽 중구난방... 몇시간을 헛짓거리로 날리게 만드네 으하하하

자 먼저 _app.tsx에서 amplify 초기화!

//for amplify initialization
import Amplify from "aws-amplify";
import awsconfig from "../src/aws-exports";

Amplify.configure(awsconfig);

//for auth hook and ui
import { Authenticator } from "@aws-amplify/ui-react";

useAuthentication hook을 쓰기 위해 <Authenticator.Provider> 태그로 app을 감싸줘야해.

export default function MyApp(props: MyAppProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  const getLayout = Component.getLayout ?? ((page) => page);
  return getLayout(
    <Authenticator.Provider>
      <CacheProvider value={emotionCache}>
        <Head>
          <meta name="viewport" content="initial-scale=1, width=device-width" />
        </Head>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          {/* <GlobalStyles /> */}
          <Component {...pageProps} />
        </ThemeProvider>
      </CacheProvider>
    </Authenticator.Provider>
  );
}

그럼 준비는 끝난 것 같고 pages폴더에 signin.tsx 파일을 생성해서 social signin을 할 수 있도록 해보자고 매우 간단해.

import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";

const signin: React.FC<any> = () => {
  return (
    <Authenticator>
      {({ signOut, user }) => {
        return user ? (
          <>
            <span>you are logged in. username: {user.username}</span>
            <button onClick={signOut}>Sign out</button>
          </>
        ) : (
          <></>
        );
      }}
    </Authenticator>
  );
};
export default signin;

Authenticator 컴포넌트를 사용하기만 하면 끝. signin이 안되어 있으면 간단한 메세지 표현하도록 해놨어. 없어도 무방함. 다음에는 index.tsx에서 useAuthenticator를 사용해봅시다. 헷갈릴 거 같으니까 코드 전체 올릴게. 참고로 여기 있는 코드들은 전부 내가 만든 next.js 기본 템플릿? 위에서 작성해서 약간 생소할 수 있어 ㅋ 기본 템플릿 만들기는 아래 참고👇👇

2022.06.14 - [Next.js] - Next.JS 프로젝트 기본 템플릿 만들기#1

Next.JS 프로젝트 기본 템플릿 만들기#1

nextjs 말고도 이런 저런 것들이 많이 필요한 것 같아. 기본적으로 ui framwork도 하나 있어야 할 것 같고 tailwindcss도 사용하고 싶고 storybook도 사용하면 좋을 것 같고 .env.local, .npmrc, .nvmrc 파일도 만..

engschool.tistory.com

아래는 index.tsx 코드 👇👇

import type { NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { Button, Container } from "@mui/material";
import tw, { styled } from "twin.macro";
import React, { ReactElement, useEffect } from "react";
import Layout from "../components/Layout";
import { useAuthenticator } from "@aws-amplify/ui-react";
import { Router, useRouter } from "next/router";

export const getServerSideProps = async () => {
  const res = await fetch("http://localhost:3000/api/hello");
  const data = await res.json();
  if (!data) {
    return {
      notFound: true,
    };
  }
  return {
    props: data,
  };
};

type NextPageWithLayout<T> = NextPage<T> & {
  getLayout?: (page: ReactElement) => ReactElement;
};

const MainContainer = styled(Container)(() => [tw`text-center`]);

const Home: NextPageWithLayout<{ name: string }> = ({ name }) => {
  const { user, signOut } = useAuthenticator((context) => [context.user]);
  const router = useRouter();
  return (
    <MainContainer>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>안녕 여러분!!</h1>
        {user ? (
          <>
            <h2>Welcome, {user!.username}!</h2>
            <Button variant="contained" onClick={signOut}>
              Sign Out
            </Button>
          </>
        ) : (
          <>
            <h2>you should login</h2>
            <Button variant="contained" onClick={() => router.push("/signin")}>
              로그인하러가자
            </Button>
          </>
        )}
      </main>
    </MainContainer>
  );
};
export default Home;

Home.getLayout = function getLayout(page: ReactElement) {
  return <Layout>{page}</Layout>;
};

별거 없지? useAuthenticator 훅 써서 user, signOut 가져온 다음 그냥 쓰면 되니까. 매우 간단하니 별도의 설명은 필요없겠지? 이렇게 하고 next.js 실행시키면 첫 화면이 아래와 같아지는데 로그인하러가자 버튼을 누르면

/signin 으로 이동하게 되면서 아래와 같이 로그인 화면이 나오게 되지.

여기에서 sign in with google 버튼을 눌러 로그인을 성공적으로 하게 되면 localhost:3000으로 다시 리디렉션하게 되어 있어.

그럼 아래 보이는 것처럼 로그인이 된 걸 확인할 수 있지. user.username이 약간 이상하지만 -_-;; 암튼 성공적으로 로그인하게 되었어.

휴 힘들었다~ amplify authentication을 처음 해봐서 생소해서 그런지 시간이 쫌 걸리더라고. 그래도 잘 되서 다행이야 ㅋ 이제 좀 더 깔끔하게 만들어야겠지? nextauth랑 같이 쓸 수 있는지도 연구해보고 말이지. ㅎㅎㅎ kakao도 넣고 해야 하는데 -_- 어휴~ 갈길이 멀다~

그럼 다들 화이팅하고~ 안녕!

'Next.js > nextauth' 카테고리의 다른 글

nextauth 카카오 로그인 #1 (4)	2022.07.13
next-auth cognito login (0)	2022.06.23
nextauth + firebase authentication #2 (2)	2022.06.03
nextauth + firebase authentication #1 (1)	2022.06.02
nextauth + firebase authentication (0)	2022.06.02

현재글next.js + AWS amplify auth login

Peter's hardware & software