06. Authentication - Setup

1. Firebase 로그인 후 생성한 앱 console에서 이메일 권한 설정

 

 

2. Visual Studio Code 툴 내에서 authentication 관련 코드 추가

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

firebase.ts

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

import {getAuth} from "firebase/auth";

/* 
  도메인, api ket 등 여러가지 키 값들이 포함된 config 개체를 
  firebase app 생성 시에 firebaseConfig 객체가 주어졌다.
*/
const firebaseConfig = {
  apiKey: "AIzaSyDRHBD9TNQFRsFTV8nf8N2SRJ7C65c4r08",
  authDomain: "nwitter-reloaded-68b8c.firebaseapp.com",
  projectId: "nwitter-reloaded-68b8c",
  storageBucket: "nwitter-reloaded-68b8c.firebasestorage.app",
  messagingSenderId: "464085535303",
  appId: "1:464085535303:web:ba1b5d7558448f3dc07f62",
  measurementId: "G-HF9RX7ZX6F"
};

/*
  firebaseConfig 옵션을 통해서 app을 생성한다.
*/
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

/*
  app에 대한 인증 서비스를 사용한다.
*/
export const auth = getAuth(app)

 

App.tsx

import { useEffect, useState } from 'react'
import { createBrowserRouter, RouterProvider} from 'react-router-dom';
import Layout from './components/layout';
import Home from './routes/home';
import Profile from './routes/profile';
import Login from './routes/login';
import CreateAccount from './routes/create-account';
import { createGlobalStyle } from 'styled-components';
import reset from "styled-reset";
import LoadingScreen from './components/loading-screen';

import { auth } from './routes/firebase';

const router = createBrowserRouter([
  {
    path:"/",
    element:<Layout />,
    children: [
      {
        path: "",
        element: <Home />
      },
      {
        path: "profile",
        element: <Profile />
      }
    ]
  },
  {
    path: "/login",
    element: <Login />
  },
  {
    path:"/create-account",
    element: <CreateAccount />
  }
]);

const GlobalStyles = createGlobalStyle`
   ${reset};
   * {
     box-sizing: border-box;
   }
   body {
     background-color: black;
     color:white;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
 `;

function App() {

  const [isLoading, setLoading] = useState(true);
  const init = async() => {
    
    await auth.authStateReady();
              // Firebase가 쿠키와 토큰을 읽고 백엔드와 소통해서 로그인여부를 확인하는 동안 기다림
    setLoading(false);
  };

  useEffect(()=>{
    init();
  },[]);
   
  return <>
    <GlobalStyles />
    {isLoading ? <LoadingScreen /> : <RouterProvider router = {router} />}
  </>;
}

export default App

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

nwitter-reloaded.z01

19.53MB

nwitter-reloaded.z02

19.53MB

nwitter-reloaded.z03

19.53MB

nwitter-reloaded.z04

19.53MB

nwitter-reloaded.z05

19.53MB

nwitter-reloaded.zip

14.20MB