Nextjs에 Cognito로 kakao social Login 만들기.. 다만 amplify를 곁들인..

주절주절

회사에 들어오고, 그냥 그런(그래도 Next.js, TypeScript, React-query, Redux-toolkit)크게 어렵진 않은?(물론 나는 많이 어려웠다 ㅎㅎ) 툴들로 프론트작업을 하던 와중,
피오역할을 맡은 분께서 이번 메인페이지 작업에 로그인구현을 Cognito로 한다고 결정나게 되었다.

아 그러면 "백엔드분들 고생좀 하시겠네~^^" 이러고 있다 코그니토는 프론트가 직접적으로 연결되어야 한다는 청천벽력같은 말을 듣게 되었다.

아니..! AWS같은거 만지기 싫어서 프론트왔더니 다시 AWS라니.. ㅠㅠ

하지만 프론트만 조작조작 하니 조금 지루하기도 했고
(아 물론, 프론트를 잘해서가 아니라, 마침 일이 없는 상태이고, 리팩토링하기엔 아직 Jest를 공부중이라 함부로 바꿧다 어떤 봉변을 당할지 몰라 가만히 있는 상태였다)

물론 지금도 Sass 문법이니, 디자인시스템이니, 지도 기반 프로젝트니 할게 많이 쌓였지만,
가끔 서버 기분을 내고 싶었는데 뭔가 잘 시기가 맞은 느낌이었다.!

대략적인 설명

1. 일단 Next 프로젝트를 만든다.
2. Nader 님의 영상을 보며 Facebook 소셜 로그인을 amplify를 통해 연동시킨다.
3. 참고의 블로그글을 보며, Kakao 로그인을 연동시킨다
4. 끝. 감상!

1. 일단 Next 프로젝트를 만든다.

저는 어차피 실무에 써야하기에 ts를 썻지만, 안쓰실 분들은 안쓰시는게 편하고 좋습니다 ㅠㅠ!

$ yarn create next-app my-next-app --typescript
$ cd my-next-app

2. Nader 님의 영상을 보며 Facebook 소셜 로그인을 amplify를 통해 연동시킨다.

(이 과정은 Nader님께서 하신 부분을 그대로 따라 하면 된다. 하지만 좀 옛날버전..!)
(영상이 싫은 신 분들을 위해 사진을 천부합니당)

facebook develop 사이트에서 가서 앱 생성

facebook(META) developer site

• 로그인 하면 내앱 탭이 나온다!
  

• 앱 만들기를 통해 앱을 생성
  

• 비즈니스나 소비자 둘중 하나로 하면 될 것 같다.
  

• 대충 그럴싸한 이름을 적고 만들기 클릭!
  

• 이제 만들고 왼쪽의 창을 클릭 해 설정 - 기본설정으로 이동한다
  

• 여기서 앱 ID, 앱 시크릿 코드를 자주 사용하게 되니 켜두고 콘솔창으로 이동한다.

---

• 해당 프로젝트 기준으로 VSCode를 킨다.
• aws-amplify 라이브러리를 다운로드 받는다.

$ yarn add aws-amplify

• amplify init을 통해 초기 세팅을 한다.

$ amplify init

---

아마 여기서 처음 하는 분들은 에러가 뜰텐데, 아마.. 이 명령어를 통해서 해결했다.

$ npm install -g @aws-amplify/cli
$ amplify configure

위는 amplify 명령어을 쓰기 위해 하고,

아래는 amplify를 사용하기 위해선 AWS의 권한이 필요하기에 IAM 권한을 가진 profile을 생성해야한다.

아마 내 기억으로 $ amplify configure를 치는 순간, aws 콘솔 홈페이지에 가서 권한을 넣는 과정을 진행할 것이다.

나는 여기서 다른 에러가 걸리지 않게 하기 위해 모든 권한을 다 넣었는데, 회사에서 쓴다면 필요한 권한만 추가해야하지 않을까 싶다.

---

다시 init으로 돌아오면, 이제 amplify 초기 설정을 매우 간단하게 진행할 수 있다.

영상에선 하나하나 엔터쳐야 햇는데, 요즘은 걍 다 되있고, 위에 설정으로 해도 되지? 라고 묻는 식으로 바뀌었다.

react를 이용한다면 바로 엔터때리면 되지만 아쉽게 우린 next를 사용하기 때문에,
n을 누르고
Source Directory Path를 out으로 바꿔줘야 한다.

그리고 엔터누르기 전에
package.json에 들어가
build: "next build && next export"
로 변경해야 한다.

나머진 전부 그냥 엔터~

그러면 이제 권한을 요청하기위해 profile이냐, key 이냐 고르라 할텐데 이때 위에서
configure 를 통해 만들고 등록한 profile을 사용하면 된다.

콘솔창이 초록초록하다면 참 다행이 감사한 마음을가지고 진행하면 된다.

솔직히 뭔가.. 중간에 에러가 났던거 같기도한데, 그부분은 개인이 검색하면서 해결해야할 것 같다. 3일밖에 안되었는데 기억이 잘 안난다..

---

이제 auth와 관련된 부분을 amplify로 쉽게 설정할 것이다.

$ amplify add auth

여기서 2번째 Social Provier 엔터

나머지는 위와 같이 하면 된다.

솔직히 무슨 뜻인지 잘 몰라서 그냥 영상따라 했다.
마지막에 앱 ID와 시크릿 키를 등록하면 끝!

---

마지막으로 push 해준다.

$ amplify push

---

이제 좀 오래 기다려야 한다.
설정을 잘못했다면, amplify delete를 하고 다시 해야하는데,
이 push가 좀 길어서 실수할 때마다 살짝씩 현타가 밀려온다.
잘 참아내어 보자!

---

여기까지 잘 나온다면 잘 수행한 것이다!

그러면 out 폴더 안에, aws-exports.js 가 나올 것이고
domain에 있는 값을 복사해두자

앱 도메인에는 그대로 값을 넣고
개인정보 처리 방침, 서비스 약관의 경우 https://www.amplifyauth.dev/를 넣자!

그리고 맨 밑에 플랫폼 추가를 누르고 Website를 클릭한다.

그리고 사이트 URL은
https://{웹 도메인}/oauth2/idpresponse
를 넣고

변경사항 저장하기를 누른다!

이제 왼쪽에 제품추가를 누른다.
WEB를 클릭하고

설정탭에 들어가서
유효한 OAuth 리디렉션 URI에 아까와 같은 값을 넣고.
https://{웹 도메인}/oauth2/idpresponse
변겨사항 저장하기를 누른다.

프로젝트에 aws-amplifty를 추가해준다.

yarn add aws-amplify

그리고 _app.tsx에 임포트한다.

// pages/_app.tsx

...

import Amplify from 'aws-amplify';
import config from '../out/aws-exports';

Amplify.configure(config);

function MyApp({ Component, pageProps }: AppProps) {
  ...
}

export default MyApp;

그리고 index.tsx는 이런식으로 한다.

import type { NextPage } from 'next';

import { Auth } from 'aws-amplify';
import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth/lib/types';

const Home: NextPage = () => {
  // 로그인이 정말 잘 되었는이 권한 확인하기
  async function checkAuth() {
    const user = await Auth.currentAuthenticatedUser();
    console.log(user);
  }

  return (
    <div>
      Home
      // 페이스북 소셜 로그인으로만 인증하기
      <button
        style={{
          backgroundColor: 'red',
          width: '200px',
          height: '100px',
        }}
        onClick={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Facebook,
          })
        }
      >
        Sign in with Facebook
      </button>
      <br />
      <br />
       
      // 코그니토가 제공하는 로그인 UI로 로그인 하기
      <button onClick={() => Auth.federatedSignIn()}>Sign in</button>

      // 로그인이 정말 잘 되었는이 권한 확인하기 
      <button onClick={checkAuth}>check user</button>
    </div>
  );
};

export default Home;

yarn dev로 실행한 결과창은 이렇다.

음... UI가 처참하더라도 이해해주면 좋겠다!

여기서 Sign in with Facebook (빨간 버튼)을 클릭하면,

바로 이 창이 뜨게 되고,

밑에 투명배경의 Sign을 클릭하면

이런 이제.. 나쁘진 않지만, 사용하기 많이 아쉬운 창이 나타난다.
여기서 회원가입, 비밀번호 찾기 기능은 코그니토가 자동으로 제공해주니(이거 할려고 코그니토 쓰는거니까.. ㅎ), 감사합니다 하고 사용하면 될 것 같다.

UI를 커스텀 하는 방법이 있는데 아직 다른 기능을 완성시키지 못해서, 기능이 깔끔히 정리되면 시작하려고 한다.

• 마지막으로, check user를 누르면, console창에 이런 형태로 정보가 들어오는 것을 확인할 수 있다.
  

기쁘다!!

카카오 로그인은 다음 블로그에 정리해보겠습니다!

참고

• Amazon Cognito로 시도 해 보는 다양한 방법의 소셜 로그인(Facebook, 카카오톡)
  
• Adding Facebook Sign In for Web Applications with AWS Amplify