AWS Cognito와 Amplify로 로그인 기능 구현하기 (React)

2020년 12월 13일 기록

React로 관리자 페이지를 구현하면서, 관리자 로그인 기능을 위해 AWS Cognito를 사용하기로 결정했다. 생각보다 간단했던 과정! Cognito 사용자 풀을 생성한 후 React에서 Amplify UI로 로그인 기능을 쉽게 구현해볼 것이다.

Cognito 사용자 풀 생성하기

AWS Cognito 사용자 풀 관리 - 생성

왼쪽 탭에 속성 클릭

이메일과 아이디로 로그인할 수 있도록 다음과 같이 설정!

모두 기본값으로 넘어가고 아래 페이지가 나오면 앱 클라이언트 추가

클라이언트 보안키 생성 체크 해제

그대로 앱 클라이언트를 생성해주고 다음 단계로 넘어간다.

풀 생성!

리액트와 연동하기 위해서는 사용자 풀 생성 후 나온 풀 ID와

앱 클라이언트 탭에서 볼 수 있는 앱 클라이언트 ID가 필요하다.

나는 관리자 페이지이기 때문에 사용자를 하나만 생성해줄 것이다.

사용자 및 그룹 - 사용자 생성

원하는 값을 적어주고 사용자를 생성한다.

Amplify로 로그인 페이지 구현하기

리액트에서 Amplify UI를 사용하려면 다음과 같은 디펜던시 설치가 필요하다. Amplify가 제공하는 리액트 컴포넌트와 Amplify를 설치해준다.

$ npm install aws-amplify @aws-amplify/ui-react
$ npm install aws-amplify

원하는 위치에 awsconfig.js 파일을 생성해 아까 필요하다고 했던 풀 ID와 앱 클라이언트 ID를 다음과 같이 적어준다.

// awsconfig.js

export default {
  Auth: {
    region: "YOUR-REGION",
    userPoolId: "YOUR-POOL-ID",
    userPoolWebClientId: "YOUR-CLIENT-ID"
  }
}

로그인을 적용해보자.

import React from "react";
import Amplify from "aws-amplify";
import { AmplifyAuthenticator } from "@aws-amplify/ui-react";
import awsconfig from "./awsconfig";

Amplify.configure(awsconfig);

export default () => {
  return (
    <AmplifyAuthenticator>
      <div>
        ONLY LOGGED IN USERS CAN SEE THIS
      </div>
    </AmplifyAuthenticator>
  );
};

AmplifyAuthenticator 태그 안에 있는 컴포넌트는 로그인한 사람만 볼 수 있도록 해준다.

나는 로그인을 한 경우에만 관리자 대시보드를 볼 수 있도록 하고 싶었기 때문에 Admin 파일의 렌더링을 AmplifyAuthenticator로 감싸주었다.

이렇게만 하면 예쁜 UI로 로그인 페이지가 구현된다.

나는 Username 로그인이 아니라 이메일 로그인이고, 관리자이므로 따로 회원가입을 할 수 없도록 하고 싶었기 때문에 약간의 커스터마이징을 진행했다. -> 나중에 username 로그인으로 변경했음

<AmplifyAuthenticator>
        <AmplifySignIn
          slot="sign-in"
          headerText="KF99 Dashboard Sign In"
          usernameAlias="email"
          style={{
            display: "flex",
            justifyContent: "center",
          }}
        >
          <div slot="secondary-footer-content"></div>
        </AmplifySignIn>
        ...
        Admin Dashboard
        ...
</AmplifyAuthenticator>

또 버튼 색상이 맘에 들지 않아 css도 바꿔주었다.

:root {
    --amplify-primary-color: #6A7CA2;
    --amplify-primary-tint: #7d8fb6;
    --amplify-primary-shade: #55627e;
}

짠!

하지만 이렇게 속성값만 바꿔서는 템플릿을 통째로 바꾸거나 버튼 모양 등을 변경할 수 없어서 전체 템플릿을 수정하려면 조금 더 복잡한 방법이 필요할 것 같다.