aws Amplify Cognito + React로 인증을 구현했을 때 발생했기 때문에 공유합니다.

주제

Cognito + React에 대한 정보를 찾으면 withAuthenticator는 'aws-amplify-react'에서 가져온 정보가 거의 없었습니다.

App.js

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure(awsconfig);

function App() {
  return (
    ...
  );
}

export default withAuthenticator(App); 

하지만 이대로 로그인 화면을 보면


이렇게 스타일링이 반영되지 않는 것이 됩니다.

대처법

여기 공식 문서에서와 같이 '@aws-amplify/ui-react'에서 가져옵니다.

  yarn add @aws-amplify/ui-react

App.js

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
// '@aws-amplify/ui-react'に変更
import { withAuthenticator } from "@aws-amplify/ui-react";

Amplify.configure(awsconfig);

function App() {
  return (
    ...
  );
}

export default withAuthenticator(App); 

이제 표시됩니다.

UI Components가 새 버전이 되었기 때문에 @aws-amplify/ui-<framework>를 사용하도록합시다.

링크

Amplify Framework announces new, rearchitected UI Component and modular JavaScript libraries