Setup

스크린샷 2023-12-29 오후 9 43 20

프로젝트에 앱 추가하기

iOS / Android / Web 선택하기

스크린샷 2023-12-29 오후 9 45 01 스크린샷 2023-12-29 오후 9 53 05

npm install firebase
firebaseConfig key 복사해두기
src 폴더가 아닌 최상위 폴더에 .env 파일 생성하기
복사해둔 firebaseConfig 키값을 .env 파일에 복사하기
.gitignore에 .env가 포함 되어있는지 확인하기

.env 파일을 만들때 KEY값 이름 앞에 REACT_APP_ 을 꼭 붙여야 한다

REACT_APP_API_KEY="my api key"
REACT_APP_AUTH_DOMAIN="my auth domail"
REACT_APP_PROJECT_ID="my project id"
REACT_APP_STORAGE_BUCKET="my sotrage bucket"
REACT_APP_MESSAGING_SENDER_ID="my messaging sender id"
REACT_APP_APP_ID="my app id"

.env 파일의 key값은 아래처럼 사용한다

const API_KEY = process.env.REACT_APP_API_KEY;
const AUTH_DOMAIN = process.env.REACT_APP_AUTH_DOMAIN;
...
...

firebase config 선언하기

import { initializeApp } from "firebase/app";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
};

const app = initializeApp(firebaseConfig);

Email + Password로 인증 없이 계정 만들기(CreateWithEmailAndPassword)

Doc: https://firebase.google.com/docs/auth/web/password-auth?hl=ko

해당 예시의 경우 Email 주소와 기본적인 Password로 계정을 만들게 되는데,

문제는 유효하지 않은 Email 주소를 사용해도 문제가 없기 때문에 요구사항을 잘 확인해야 한다.

Firebase 프로젝트 콘솔에서 인증 -> 로그인방법 -> 이메일/비밀번호 사용 설정을 먼저 해야한다.

스크린샷 2023-12-29 오후 11 43 36

Create a new account code

async function onSubmit(data: any) {
        try {
            setCreate(true);
            const credentials = await createUserWithEmailAndPassword(
                auth,
                data.email,
                data.password
            );
            // await updateProfile(credentials.user, {
            //   displayName: data.name
            // })
            //
            alert("Create Account Done");
        } catch (e) {
            if (e instanceof FirebaseError) {
                const errorCode = e.code;
                const errorMessage = e.message;
                console.log(`code: ${errorCode}, message: ${errorMessage}`);
            }
        } finally {
            reset();
            setCreate(false);
        }
    }

스크린샷 2023-12-30 오후 11 56 05

Email + Password로 Email인증을 거쳐 계정 만들기(CreateWithEmailAndPassword + Email Verification)

스크린샷 2023-12-31 오후 5 05 14

혹시 모르니 Firebase console에서 비밀번호가 없는 email login 허용해준다.

지금 와서 생각해보니, 굳이 안해줘도 되는 부분인거 같음, 어차피 createEmailWithPassword를 사용하는데 문제가 없을거같기 때문에

Workflow

이메일 계정 인증은 이메일 + 비밀번호로 계정을 만드는 단계에서 추가적으로 이루어지는 과정이다.

따라서 계정을 생성만 할뿐 자동으로 로그인이 되도록 해서는 안된다. (이메일 인증이 아직 이루어 지지 않았기 때문이다.)

이메일과 비밀번호로 계정을 만들었으면, 해당 이메일로 Verification link를 전송하고, 유저가 입력한 Email이 Valid한 Email이라면 해당 link를 통해 이메일 인증을 진행한다.

그 이후 Sign in with email을 하는 과정에서 user.emailVerfied가 True일 경우 정상적으로 로그인을 진행하게 되고, 인증이 되지 않았을 경우 로그인을 제한할 수 있다.

Verification link at email

스크린샷 2023-12-31 오후 5 43 08

user.emailVerified 값

스크린샷 2023-12-31 오후 5 45 08

Send email code

function onSubmit(data: any) {
    setCreate(true);
    createUserWithEmailAndPassword(auth, data.email, data.password)
        .then((userCredential) => {
            sendEmailVerification(userCredential.user).then(() => {
                alert("send verification email");
                console.log(userCredential.user.email);
                console.log(userCredential.user.emailVerified);
            });
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(`code: ${errorCode}, message: ${errorMessage}`);
        })
        .finally(() => {
            reset();
            setCreate(false);
        });
}

Kakao Login

생각보다 손이 많이 가는 부분이라, Firebaes를 사용할때는 그냥 구글에서 지원해주는 Auth만 사용하는게 편할거같다...

참고: https://velog.io/@hadam/integrate-kakao-login-with-firebase-using-react-and-functions-2

1.카카오 개발자 사이트 이동

스크린샷 2023-12-31 오후 8 30 28

내 애플리케이션 추가

스크린샷 2023-12-31 오후 8 35 45

앱 키 기억하기

스크린샷 2023-12-31 오후 8 37 23

플랫폼 설정하기 => Web 플랫폼 등록

스크린샷 2023-12-31 오후 8 46 54

사이트 도메인 등록하기 ex)localhost:3000
카카오 로그인이 될 Redirect URI 등록

스크린샷 2023-12-31 오후 8 52 57

6-1. 상태 활성화 On

스크린샷 2023-12-31 오후 9 27 57

6-2. Redirect URI 등록

스크린샷 2023-12-31 오후 10 10 46

동의항목 => 필요한 데이터 설정 ex)프로필 정보, 이메일, 성별, etc...

스크린샷 2023-12-31 오후 10 46 16

JavaScript Download 에서 Full SDK 복사 후 public/index.html의 head 부분에 복사
코드에서 복사해둔 KEY값으로 초기화

if (!window.Kakao.isInitialized()) {
    window.Kakao.init(process.env.REACT_APP_KAKAO_JAVASCRIPT_KEY);
}

Kakao 로그인 실행

function onLoginWithKakao() {
    const redirectUri = `${window.location.origin}/login/kakao`;
    const scope = [KAKAO_SCOPE_NICKNAME, KAKAO_SCOPE_PROFILE_IMAGE].join(
        ","
    );

    window.Kakao.Auth.authorize({
        redirectUri,
        scope,
    });
}

로그인이 정상적으로 이루어졌다면, 미리 정의해둔 Redirect URL로 이동하게되고 Token이 함께 넘어옴

스크린샷 2023-12-31 오후 11 24 18

URLSearchParams를 이용해 code(token)값을 갖고오고, 만약 없다면 로그인을 다시하도록 구성

const navigate = useNavigate();
const searchParams = new URLSearchParams(window.location.search);
const code = searchParams.get("code");

console.log(code);
if (!code) {
    navigate("/login");
}

firebase function을 사용하기 위해 npm install firebase-tools 명령어로 설치 진행

13-1. 터미널에 firebase login 입력 후 로그인 (로그인이 되어 있다면, Already logged in as my account가 출력)

13-2. 터미널에 firebase init functions 입력

13-3. Use an existing project 선택 후 현재 firebase에서 사용중인 프로젝트 선택

13-4. 언어는 타입스크립트 선택

13-5. 이후 모두 엔터

13-6. 이제 functions/src/index.ts에 코드 작성이 가능

HTTP 요청 함수 작성

필요한 API들

클라이언트로 부터 인가 코드를 전달 받는 함수
인가 코드로 토큰 발급을 요청할 함수
카카오 유저 정보를 갖고오는 함수
Firebase auth user 생성하는 함수
생성된 user id를 이용해 custom token을 생성하는 함수
클라이언트로 custome token을 전달하는 함수

npm install express cors 명령어를 이용해 설치
functions/src/index.ts파일에 express 앱을 생성

import * as functions from "firebase-functions";
import * as express from "express";
import * as cors from "cors";

const app = express();
app.use(cors({ origin: true }));

app.post("/kakao", async (req, res) => {
    // TODO: API 구현하기
});

exports.auth = functions.https.onRequest(app);

KAKAO REST API DOC

토큰을 요청하기 위해서는 REST API키가 필수이고, 이는 [내 애플리케이션] > [앱 키]에서 확인 가능

스크린샷 2024-01-01 오전 12 16 52

axios를 이용해 HTTP 통신을 처리하고, dotenv도 함께 설치 npm install dotenv axios
getToken 함수 작성

async function getToken(code: string): Promise<ITokenResponse> {
    const body = {
        grant_type: "authorization_code",
        client_id: process.env.REACT_APP_KAKAO_REST_API_KEY as "",
        redirect_uri: process.env.REACT_APP_KAKAO_REDIRECT_URI as "",
        code: code,
    };

    const res = await axios.post(
        "https://kauth.kakao.com/oauth/token",
        new URLSearchParams(body)
    );
    return res.data;
}

getKakaoUser 함수 작성

async function getKakaoUser(token: string): Promise<KakaoUser> {
    const res = await axios.get("https://kapi.kakao.com/v2/user/me", {
        headers: { Authorization: `Bearer ${token}` },
    });
    return res.data;
}

npm install firebase-admin 명렁어로 설치

가져온 카카오 유저 정보를 바탕으로 Firebae Authentication을 이용해 사용자를 생성해 주어야 하고,

이때 사용자와 Custom Token을 생성하기 위해서 Admin SDK가 필요.

21-1. 서비스 계정의 비공개 키 파일 생성

a. Firebase Console -> Project 설정 -> 서비스 계정 -> 새 비공개 키 생성

스크린샷 2024-01-01 오후 1 47 34

b. 생성된 키는 download되는데 복구가 불가능하니 잘 간직

c. Download된 키 파일을 이용해 Admin App을 초기화하기 위해서 Secret Manager를 이용해 환경을 구성해야함

스크린샷 2024-01-01 오후 2 07 48

d. 먼저 구글 콘솔로 이동해 보안 비밀을 생성. 바로가기

- 결제 정보가 연동이 되어야 보안 비밀 생성이 가능

e. 이름, 다운로드 했던 비공개키 업로드

f. functions/src/index.ts의 exports.auth = 부분에 생성한 보안 비밀에 접근할 수 있도록 runWith추가

g. Admin app 초기화 코드 작성

사용자 만들기

생성한 app을 이용해 auth service를 불러오고 유저 업데이트를 시도함. 만약 유저가 없다면 auth/user-not-found 에러가 발생하므로, try-catch문을 이용해 유저 생성 코드를 작성해야함. 추가 오류 코드 목록

커스텀 토큰 만들기
함수배포
- firebase deploy --only functions

배포가 완료되면 Firebase Console -> 모든 제품 -> Functions에서 확인 가능

배포 시도시 --fix 에러가 발생할 경우

$ (cd functions && npx eslint . --fix)
# or
$ (cd functions && node_modules/eslint/bin/eslint.js . --fix)

배포 시도시 Missing JSDoc comment 에러가 발생할 경우, .eslintrc.js파일의 rules부분에 아래와 같이 에러가 나는 함수를 추가

"require-jsdoc": [
    "error",
    {
        require: {
            getToken: false,
            getKakaoUser: false,
            getAdminApp: false,
            updateOrCreateUser: false,
        },
    },
],

위 방법이 동작하지 않는다면, 함수들을 function이 아닌 arrow function으로 다시 작성한다.

추가적으로 react-router 에서 deploy functions 중 에러가 발생되고있다.

버전6부터 @types/react-router-dom이 필요하지 않으므로 삭제하도록 한다. npm uninstall @types/react-router-dom 참고링크

Error: Your project recap-1daad must be on the Blaze (pay-as-you-go) plan to complete this command. Required API cloudbuild.googleapis.com can't be enabled until the upgrade is complete. To upgrade, visit the following URL:

https://console.firebase.google.com/project/recap-1daad/usage/details

또 위와같은 에러가 발생할 경우, firebase console에서 요금제를 아직 변경하지 않아서 발생하는 에러이다.

이미 결제정보는 입력해 두었으므로 콘솔에서 요금제를 Spark 에서 Blaze로 변경하자. 스크린샷 2024-01-01 오후 10 49 35

이후 디플로이 시도시 빈번하게 에러가 발생하는데, 에러를 잘 처리하고 다시 확인해보자. (dependencies가 잘 설치 되어있는지 등등) 스크린샷 2024-01-01 오후 11 07 55

⚠️ functions/src/index.ts 에서 사용할 환경변수는 local .env 파일이 아닌 google cloud console에 보안 비밀로 만들어야함 ⚠️

동시에 functions/src/index.ts 파일 에서도 아래와 같이 넣어줘야 함

exports.auth = functions
    .runWith({
        secrets: [
            "SERVICE_ACCOUNT_KEY",
            "KAKAO_CLIENT_SECRET_KEY",
            "REACT_APP_KAKAO_REDIRECT_URI",
            "REACT_APP_KAKAO_REST_API_KEY",
        ],
    })
    .https.onRequest(app);

Firebase - jh0152park/Wiki-Notepad GitHub Wiki

Setup

Email + Password로 인증 없이 계정 만들기(CreateWithEmailAndPassword)

Email + Password로 Email인증을 거쳐 계정 만들기(CreateWithEmailAndPassword + Email Verification)

Kakao Login

⚠️ GitHub.com Fallback ⚠️

Firebase - jh0152park/Wiki-Notepad GitHub Wiki

Setup

Email + Password로 인증 없이 계정 만들기(CreateWithEmailAndPassword)

Email + Password로 Email인증을 거쳐 계정 만들기(CreateWithEmailAndPassword + Email Verification)

Kakao Login

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️