[에러 이슈] Error: AuthUI instance is deleted!

[taetaeo]

StyledFirebaseAuth 에서 config에러

• react-firebaseui 에러 이슈

내 ui config

const firebaseAuthConfig: firebaseui.auth.Config | any = {
  signInFlow: "popup", // google, email, github ... overall provider
  signInOptions: [
    {
      provider: EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: true,
    },
    // add additional auth flows below
    GoogleAuthProvider.PROVIDER_ID,
    TwitterAuthProvider.PROVIDER_ID,
    GithubAuthProvider.PROVIDER_ID,
  ],
  signInSuccessUrl: "/",
  credentialHelper: "none",
  callbacks: {
    signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {
      const userData = mapUserData(user);
      setUserCookie(userData);
    },
  },
};

• StyledFirebase에서 ui config에 따른 오류들이 종종 발생하는 것 같다.
• 뭐때문인지 아직 파악이 안됨..
• 일단 참고 해보고 해결해야할듯..
• 참고 : Error: Uncaught (in promise) Error: AuthUI instance is deleted! firebase/firebaseui-web-react#59

문제 해결

• 처음엔 나의 ui config가 잘못된 것인줄 알았으나, 원인은 두 가지 였다.

첫 번째 이슈 - TSX에서 react-firebaseui

• 먼저, react-firebaseui는 타입스크립트를 현재 지원하지 않는 것같다.
  
• 여기를 통해 설치를 하니 타입스크립트에서도 잘 작동이 됨.

두 번째 이슈 - SSR을 지원하지 않음

• SSR을 지원하지 않기 때문에,dynamic import `를 사용해줘야 했다.

import dynamic from "next/dynamic";
const FirebaseAuth = dynamic(
  () => import("../../components/auth/firebaseAuth"),
  {
    ssr: false,
  }
);

• 저렇게 SSR을 지원하지 않을때, dynamic import 를 해줘야 한다는 것을 깨달음...

구현 결과

• 이렇게 firebaseUI가 적용이 되었고, 이것을 통해서 로그인까지 잘 되었다.
• 하지만, 이렇게 여러가지 문제를 가지고 있기 때문에, 좀더 다른 방식으로 로그인을 하는것이 낫지 않을까 차차 고민해 봐야겠다.
• 일단 중요한것은 로그인 구현 -> 해당 uid를 통해 장바구니에 id값 넘긴 후 -> 유저마다 다른 장바구니 까지 구현하는 것이 우선으로 한 뒤, 차차 개선해나가야겠다

[negu63]

와 덕분에 해결했어요 감사합니다~

[taetaeo]

와 덕분에 해결했어요 감사합니다~

도움이 되셨다니 다행입니다.!!