WWW : World Wide Wonsama

개요

- 도큐사우르스( docusaurus ) 에 파이어베이스 ( firebase ) 로그인 연동

- 기준 작업일 : 24/11/04

- Nodejs : 22.11.0 LTS

- Docusaurus : 3.6

설치

- Nodejs 설치 : https://nodejs.org/en/download/package-manager

- Docusaurus 설치 : https://docusaurus.io/docs

아래 커맨드를 실행하여 my-website 라는 폴더에 docusaurus 를 설치한다

( 필자는 js 로 설치 했는데 ts 로 설치 해도 무방함 / 그러나 js 로 하여 그냥 똑같이 하는 걸 추천 )

npx create-docusaurus@latest my-website classic

맥의 경우 npx 로 설치 시 오류가 발생하는 경우 아래와 같은 커맨드를 해본다. ( .npm 경로 소유자를 sudo 가 로그인 계정으로 변경)

sudo chown -R $(whoami) ~/.npm

대상 폴더 아래에 들어가서 실행 해보면 잘 동작하는 것을 확인할 수 있다.

cd my-website
npm run start

# 이후 http://localhost:3000/ 으로 접속하여 정상적으로 데모 사이트가 잘 뜨는지 확인한다.

이후 아래와 같은 폴더를 구성 해주도록 한다.

추가 의존성 설치 

npm i firebase firebaseui docusaurus-plugin-dotenv

이제 관련 파일은 아래 링크를 참조하여 수정한다

https://iammassoud.net/blog/docusaurus-authentication-using-google-firebase

그런데 StyledFirebaseAuth 의 경우 아래와 같이 파일 작성 하도록 한다.

( react-firebaseui 가 업데이트 되지 않아 해당 부분을 아래 파일을 작성하여 해결 )

import { useEffect, useRef, useState } from "react"
import { onAuthStateChanged } from "firebase/auth"
import * as firebaseui from "firebaseui"
import "firebaseui/dist/firebaseui.css"

const StyledFirebaseAuth = ({
  uiConfig,
  firebaseAuth,
  className,
  uiCallback
}) => {
  const [userSignedIn, setUserSignedIn] = useState(false)
  const elementRef = useRef(null)

  useEffect(() => {
    // Get or Create a firebaseUI instance.
    const firebaseUiWidget =
      firebaseui.auth.AuthUI.getInstance() ||
      new firebaseui.auth.AuthUI(firebaseAuth)
    if (uiConfig.signInFlow === "popup") firebaseUiWidget.reset()

    // We track the auth state to reset firebaseUi if the user signs out.
    const unregisterAuthObserver = onAuthStateChanged(firebaseAuth, user => {
      if (!user && userSignedIn) firebaseUiWidget.reset()
      setUserSignedIn(!!user)
    })

    // Trigger the callback if any was set.
    if (uiCallback) uiCallback(firebaseUiWidget)

    // Render the firebaseUi Widget.
    // @ts-ignore
    firebaseUiWidget.start(elementRef.current, uiConfig)

    return () => {
      unregisterAuthObserver()
      firebaseUiWidget.reset()
    }
  }, [firebaseui, uiConfig])

  return <div className={className} ref={elementRef} />
}

export default StyledFirebaseAuth

그리고 Firebase를 설정하고 나면 ...

위처럼 로그인 설정을 할 수 있게 된다 :) 

( src/utils/constants.js 파일 내에서 PROTECTED_PATHS 를 조정하여 접속 제한 폴더를 지정할 수 있음 ) 

많은 부분을 생략 하였는데 ... 나중에 시간 될 때 Github Template 을 추가하여 빠르게 setup 하는 부분을 공유 해보도록 하겠습니다.

---

참조링크

- https://jiyeongstar.tistory.com/197

- https://github.com/massoudmaboudi/docusaurus-auth-firebase/tree/main

- https://transform.tools/typescript-to-javascript

- https://docusaurus.io/docs