Authentication (4) 썸네일형 리스트형 11. Authentication - Github Login github-btn.tsximport { GithubAuthProvider, signInWithPopup } from "firebase/auth";import { styled } from "styled-components";import { useNavigate } from "react-router-dom";import { auth } from "../routes/firebase";const Button = styled.span` margin-top: 50px; background-color: white; font-weight: 500; width: 100%; color: black; padding: 10px 20px; border-radius: 50px; border: 0; display.. 10. Authentication - Log In 1. 최종 로그인 & 회원가입 구현 auth-components.tsimport { styled } from "styled-components";export const Wrapper = styled.div` height: 100vh; /* 화면 전체 높이를 기준으로 중앙 정렬 */ display: flex; justify-content: center; /* 수평 중앙 */ align-items: center; /* 수직 중앙 */ flex-direction: column; width: 420px; margin: 0 auto; /* 화면 .. 09. Authentication - Protected Routes protected-route.tsximport React from "react";import { auth } from "./firebase";import { Navigate } from "react-router-dom";export default function ProtectedRoute({children} : { children : React.ReactNode;}){ const user = auth.currentUser; if(user === null){ return } return children;} App.tsximport { useEffect, useState } from 'react'import { createBrowserRouter, RouterProv.. 06. Authentication - Setup 1. Firebase 로그인 후 생성한 앱 console에서 이메일 권한 설정 2. Visual Studio Code 툴 내에서 authentication 관련 코드 추가 firebase.tsimport { initializeApp } from "firebase/app";import { getAnalytics } from "firebase/analytics";import {getAuth} from "firebase/auth";/* 도메인, api ket 등 여러가지 키 값들이 포함된 config 개체를 firebase app 생성 시에 firebaseConfig 객체가 주어졌다.*/const firebaseConfig = { apiKey: "AIzaSyDRHBD9TN.. 이전 1 다음
