> For the complete documentation index, see [llms.txt](https://sharryhong.gitbook.io/front-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sharryhong.gitbook.io/front-end/front-end-dev/react/firebase-v9-auth-with-react.md).

# Firebase v9 Auth with React

토이프로젝트에 사용한 파이어베이스 관련 코드를 정리해보겠습니다. :thumbsup:

## 파이어베이스 버전9. 인증 setup 

Firebase 'Go to console'에서 project를 생성합니다. 

'Add on app to get stated' (web) 클릭 후 app을 등록합니다.  

app 등록시 config 코드가 나오고, 나중에 확인시에는 왼쪽 상단 '설정'버튼 -> '프로젝트 설정'을 클릭하면 나옵니다.

databaseURL 의 경우 Realtime Database 에서 Create Database

```
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...", 
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
```

### React Project에 firebase SDK setup하기

코드에 노출되면 안되는 중요한 키값들

관련 링크 : <https://create-react-app.dev/docs/adding-custom-environment-variables/>&#x20;

> .env 예)

```
REACT_APP_FIREBASE_APIKEY=keyvalue
```

> service/firebase.js

```
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASEURL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
};

const firebaseApp = initializeApp(firebaseConfig);

export default firebaseApp;

```

### login, logout 설정 (Google, Github Sign-In)

관련 링크 :  <https://firebase.google.com/docs/auth/web/google-signin?authuser=0>&#x20;

로그인, 로그아웃 등 authentication에 관련된 일을 하는 클래스

> service/auth\_service.js

```
import {
  getAuth,
  signInWithPopup,
  GoogleAuthProvider,
  GithubAuthProvider,
} from "firebase/auth";

class AuthService {
  constructor() {
    this.auth = getAuth();
    this.GoogleProvider = new GoogleAuthProvider();
    this.GithubProvider = new GithubAuthProvider();
  }
  login(provider) {
    signInWithPopup(this.auth, this[`${provider}Provider`]);
  }
  logout() {
    this.auth.signOut();
  }
  // 나중에 session 관련 코드 분리하여 사용 
  onAuthStateChanged(onChangedUser) {
    this.auth.onAuthStateChanged((user) => {
      onChangedUser(user);
    });
  }
}

export default AuthService;

```

### firebase config 와 연결 후 dependency injection

> index.js

```
import firebaseApp from "./service/firebase.js";
import AuthService from "./service/auth_service.js";

// firebase config 와 연결 
const authService = new AuthService(firebaseApp);

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
        // dependency injection 
        <App authService={authService} />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);
```

### login , logout 함수&#x20;

> App.jsx

```
function App({ authService }) {
  const onLogin = (event) => {
    authService.login(event.target.innerText);
  };

  const onLogout = useCallback(() => {
    authService.logout();
    navigate("/");
  }, [authService]);
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sharryhong.gitbook.io/front-end/front-end-dev/react/firebase-v9-auth-with-react.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.