Next.js authentication with AWS amplify

auth, user 정도는 global context 로 관리할 필요가 있는것같다. auth 가 되어있다고 하더라도, 내가 관리하는 db 에 user 가 register 되어있을 필요가 있고, register 되어있지 않다면 register 하고, 이미 register 되어있다면 context 에 저장하는 로직. user 정보가 profile 페이지에서만 필요할 수도 있지만, 유저에 따라서 어떤 페이지가 보여지게 할지 customizing 할 수도 있으므로, user 정보는 global 하게 관리하는게 맞는 것 같다.

aws-amplify Hub 이용해서

auth 바뀌는것 check,
customOAuthState 이벤트 이용해서 fedrated signin 이후 로직 진행(추가 유저정보 입력, db 에 user 저장 )
context api 이용해서 auth, user 정보 저장.
앱 최상단에 useEffect 이용해서 auth , user check, -> context 에 state hydrate

next.js 에서는 _app.ts 파일에 다음과같이 적용하면 될듯하다.

import React, { useEffect, useContext, createContext, useReducer } from 'react';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import produce from 'immer';

import Head from 'next/head';
import Amplify, { API, Storage, Auth, Hub, withSSRContext } from 'aws-amplify';

import { userByProviderKey } from '@/graphql/queries';

import config from '../aws-exports';
import './globals.scss';

Amplify.configure({
  ...config,
  ssr: true,
});

const INITIAL_AUTH_STATE = {
  user: null,
  auth: null,
  isAuthenticated: false,
  isSignIned: false,
};

const authReduceer = produce((draft, action) => {
  switch (action.type) {
    case 'AUTHENTICATE':
      draft.auth = action.payload;
      draft.isAuthenticated = true;
      break;
    case 'USER_SIGN_IN':
      draft.user = action.payload;
      draft.isSignIned = true;
      break;
    case 'SIGN_OUT':
      return INITIAL_AUTH_STATE;

    default:
      // throw Error('No matching type');
      return;
  }
}, INITIAL_AUTH_STATE);

export const AuthContext = createContext({});

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const [authState, dispatch] = useReducer(authReduceer, INITIAL_AUTH_STATE);

  const listenAuthHandler = async ({ payload: { event, data } }) => {
    switch (event) {
      case 'signIn':
        dispatch({ type: 'AUTHENTICATE', payload: data });
        break;
      case 'signOut':
        dispatch({ type: 'SIGN_OUT' });
        break;
      case 'customOAuthState':
        try {
          const cognitoUser = await Auth.currentAuthenticatedUser();
          await userSignIn(cognitoUser);
        } catch (e) {
          console.log(`e`, e);
        }
        break;
    }
  };

  const userSignIn = async (cognitoUser) => {
    const providerKey = cognitoUser.username;
    const userOfProviderKey = await API.graphql({
      query: userByProviderKey,
      variables: { providerKey },
    });

    const dbUser = userOfProviderKey.data.userByProviderKey.items[0] ?? null;

    if (dbUser) {
      dispatch({ type: 'USER_SIGN_IN', payload: dbUser });
      console.log(`dbUser`, dbUser);
    } else {
      router.push('/user/register');
    }
  };

  useEffect(() => {
    Hub.listen('auth', listenAuthHandler);

    Auth.currentAuthenticatedUser()
      .then((cognitoUser) => {
        dispatch({ type: 'AUTHENTICATE', payload: cognitoUser });
        return cognitoUser;
      })
      .then((cognitoUser) => {
        userSignIn(cognitoUser);
      })
      .catch((e) => dispatch({ type: 'SIGN_OUT' }));

    return () => {
      Hub.remove('auth', listenAuthHandler);
    };
  }, []);
  return (
    <>
      <AuthContext.Provider value={{ authState, dispatch }}>
        <Head>
          <title>LOG</title>
          <link rel="icon" href="/favicon.ico" />
          <link
            rel="preload"
            href="/fonts/Pacifico-Regular.ttf"
            as="font"
            crossOrigin=""
          />
        </Head>
        <Component {...pageProps} />
      </AuthContext.Provider>
    </>
  );
}

export default MyApp;

byyoungjin / myblog-next

Next.js authentication with AWS amplify #9

issue: signin 후에 blank page

issue2 : federated signin typescript error

issue: Auth.federatedSignin -> cred 반환하지 않음

issue: pop up closed by user

OpenId connect Identiti Provideer 이용하는 법

auth 관리 정리