옛날에는 로그인 폼을 직접 구현했지만 이제는 그럴 필요가 없어졌다. 참 세상 좋아진 것 같다. AWS Cognito를 사용해 유저 풀을 만들고 Amplify framework를 사용해 아주 손쉽게 로그인 폼을 사용할 수 있다.
0. Cognito 유저 풀 생성은 AWS 공식 문서가 잘 되어 있으니 스킵한다.
1. 디펜던시 설치
두 가지를 설치해야 한다. 하나는 Amplify, 다른 하나는 Amplify가 제공하는 리액트 컴포넌트.
npm install aws-amplify @aws-amplify/ui-react
npm install aws-amplify
2. Config 파일 만들기
AWS Cognito의 세부사항을 담은 awsconfig.js 파일을 만들어준다.
export default {
Auth: {
region: "us-east-1",
userPoolId: "{userPoolId}",
userPoolWebClientId: "{userPoolWebClientId}"
}
}
3. 로그인 적용하기
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 안에 있는 것들은 로그인 한 사람만 볼 수 있게 되었다. 해당 컴포넌트를 접근하려고 하면 아래와 같은 아마존 테마의 예쁜 로그인 페이지를 볼 수 있다. UI부터 백엔드까지 아마존이 로그인 모듈을 제공해주니 다른 비즈니스 로직에 더 집중할 수 있게 됐다.
4. 회원가입 못하게 막기
내 경우엔 일반 사용자와 관리자 페이지를 구분해 놓았기 때문에 유저 풀에 일반 사용자가 직접 회원가입을 하지 못하도록 설정했다. 문제는 이 로그인 페이지의 No account? Create account 링크를 없애는 것이었다.
아마 아직까지 Amplify에서 고치지 않은 버그인 것 같은데, 저 링크를 꺼버리는 옵션이 없다. 그래서 이슈 페이지를 열심히 뒤져보다가 찾은 workaround 방법이다.
<AmplifyAuthenticator>
<AmplifySignIn
slot="sign-in"
style={{
display: "flex",
justifyContent: "center",
}}
>
{/* Hide create account link */}
<div slot="secondary-footer-content"></div>
</AmplifySignIn>
</AmplifyAuthenticator>
위의 코드를 적용하니 계정 생성 링크가 사라졌다.
 |