react firebase sms 인증

1) 우선 파이어베이스에 들어가서 프로젝트 추가를 해줍니다!

1-1) 프로젝트 디렉터리에서 npm install firebase를 해줍니다!

1-2) 프로젝트를 만들 때, 보여주는 코드가 있을겁니다! 그 코드를 그대로 옮겨줍니다. 다만, 키를 직접 입력하면 나중에 곤란해질 수 있으니까 아래와 같이 .env 파일에 저장해줍니다!

.env 파일
REACT_APP_API_KEY = 
REACT_APP_AUTH_DOMAIN = 
REACT_APP_PROJECT_ID = 
REACT_APP_STORAGEBUCKET = 
REACT_APP_MESSAGING_SENDER_ID = 
REACT_APP_APP_ID = 
REACT_APP_MEASUREMENT_ID =

파이어베이스를 초기화할 파일

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_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

2) AUthentication 칸으로 갑니다!

3) sms를 이용할테니 전화 버튼을 클릭합니다.

4) 사용 설정을 하고 저장을 누릅니다!

5) 이제 본격적으로 시작해봅시다!

import { initializeApp } from "firebase/app";
import {
  getAuth,
  RecaptchaVerifier,
  signInWithPhoneNumber,
} from "firebase/auth";
import { useState } from "react";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,		
  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,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);


const getPhoneNumberFromUserInput = () => {
  return ""; // 여러분의 번호 또는 보낼 번호를 국제번호를 붙여서 써줍니다!
//  +821012345679 ( 010-1234-5678을 왼쪽과 같이, +82를 붙이고 010에서 0 하나 뺍니다)
};

const auth = getAuth();	// 인증객체를 만듭니다

export default function Login() {
  const [value, Setvalue] = useState("");

  const onClickHandle = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(auth, "sign-in-button", {
      size: "invisible",
      callback: (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
      },
    });
    auth.languageCode = "ko";		// 한국어로 해줍시다
    const phoneNumber = getPhoneNumberFromUserInput(); // 위에서 받아온 번호
    const appVerifier = window.recaptchaVerifier;
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;	// window
      })
      .catch((error) => {
        console.log("SMS FAILED");
      });
  };

  const getCodeFromUserInput = () => {
    return value;
  };

  const onClickHandle2 = () => {
    const code = getCodeFromUserInput();
    window.confirmationResult
      .confirm(code)
      .then((result) => {
        // User signed in successfully.
        const user = result.user;
        console.log("hey YOU ARE IN SUCCESS");
        // ...
      })
      .catch((error) => {
        // User couldn't sign in (bad verification code?)
        // ...
      });
  };

  return (
    <>
      <div id="sign-in-button"></div>
      <button onClick={onClickHandle}>문자보내기</button>
      <input onChange={(e) => Setvalue(e.target.value)} type="text" />
      <button onClick={onClickHandle2}>인증번호 확인하기</button>
    </>
  );
}