• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

회원가입 실행이 안되요

23.12.05 02:12 작성 23.12.05 02:17 수정 조회수 213

0

 

사전 설정은 다 제대로 한 것 같은데 회원가입하면 실패도 아니고 오류 로그가 뜹니다.. ㅠㅠapi 오류라고 해서 콘솔 sdk도 다 다시 설정해 보았는데 자꾸 오류가 뜹니다... ㅠㅠ 해결 부탁드립니다. 

제 파이어베이스 API sdk입니다. 

useSignup.js

import { useState } from 'react'
import { appAuth } from '../firebase/config'
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'

export const useSignup = () => {
    // 에러 정보를 저장합니다. error 상수에 저장 기본값 null
    // setError -> 상태를 업데이트 하기 위한 것 
    const [error, setError] = useState(null);
    // 현재 서버와 통신중인 상태를 저장합니다.
    // isPending이 ture면 통신중
    const [isPending, setIsPending] = useState(false);

    // signup 훅을 만듭니다. email, password, displayName 세가지 매개변수를 갖습니다.
    const signup = (email, password, displayName) => {
        setError(null); // 아직 에러가 없으니 null 입니다.
        setIsPending(true); // 통신중이므로 true입니다.


        // 파이어베이스에서 회원가입을 도와주는 함수 (도큐먼트에 있음)
        // 비밀번호 설정으로 유저 정보를 등록합니다. config에서 import 받아야합니다.
        createUserWithEmailAndPassword(appAuth, email, password)
            .then((userCredential) => {
                // 회원가입
                // 성공했을 때, Signed in
                // 유저정보를 user에 담아옴
                const user = userCredential.user;
                console.log(user);

                // 회원 정보를 정상적으로 받지 못하면 실패입니다. -> 경고 띄우기
                if (!user) {
                    throw new Error('회원가입에 실패했습니다.');
                }
                

                // 회원 정보 업데이트
                // 회원가입이 완료되고 유저 정보에 닉네임(displayName)을 업데이트합니다. import 받아야합니다.\
                // appAuth.currentUser를 통해 현재 로그인 정보를 받아옴
                updateProfile(appAuth.currentUser, { displayName })
                    .then(() => {
                        setError(null);
                        setIsPending(false);
                    }).catch((err) => { //예외 처리
                        setError(err.message);
                        setIsPending(false)
                        console.log(err.message);
                    });
            })

            .catch((err) => {
                // 예외 처리
                setError(err.message);
                setIsPending(false);
                console.log(err.message);
            });
    }

    // 에러값, 통신여부, signup 함수(밖에서 사용할 수 있도록) 리턴
    return { error, isPending, signup }
}

 

 

config.js

// 계정과 관련된 파이어베이스 설정 -> 깃허브에 올리면 안됨
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
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,
};

// Initialize Firebase 인증 초기화
// firebase 초기화
const app = initializeApp(firebaseConfig);
const appAuth = getAuth();
// firestore 초기화
const appFireStore = getFirestore(app);

// 나중에 다른 곳에서도 사용 가능하게 빼놓는 것
export{appAuth, getFirestore}

 

 

.env

REACT_APP_API_KEY = AIzaSyAIgKLWTMyx_t8VhSzEUB3XQF755FGB7_c
REACT_APP_AUTH_DOMAIN = mydiary-ccb8c.firebaseapp.com
REACT_APP_PROJECT_ID = mydiary-ccb8c
REACT_APP_STORAGE_BUCKET = mydiary-ccb8c.appspot.com
REACT_APP_MESSAGING_SENDER_ID = 1047629886497
REACT_APP_APP_ID = 1:1047629886497:web:59ffb871ffeb3054261f60

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.12.07

안녕하세요, 인프런 AI 인턴입니다.
p03o08님, 회원가입 실행과 관련하여 오류가 발생하는 문제에 대해 답변드리겠습니다.

회원가입 과정에서 나타난 오류 로그의 내용을 살펴보면 API 키가 유효하지 않다는 메시지가 나타나고 있습니다. 이는 보통 .env 파일에 정의된 REACT_APP_API_KEY 환경 변수값이 정확하지 않거나, 빌드 과정에서 환경 변수가 제대로 적용되지 않을 때 발생합니다.

먼저, 여러분이 참고하신 코드 중 config.js 파일에서 firebaseConfig를 정의할 때 환경 변수를 사용하고 있음을 확인했습니다. 이 환경 변수가 실제로 유효한지 확인하는 것이 첫 번째 단계입니다. .env 파일을 확인하여 Firebase 프로젝트 설정에서 제공하는 API 키와 일치하는지 확인해 보세요. 가끔 환경 변수의 이름이 잘못 지정되었거나, 키 값 자체에 오타가 있는 경우가 있을 수 있습니다.

그리고 환경 변수를 사용하여 Firebase를 초기화하는 과정에서 실제로 환경 변수 값이 올바르게 적용되고 있는지를 확인하는 것도 중요합니다. console.log를 사용하여 브라우저 콘솔에서 firebaseConfig 객체의 내용을 확인해보세요.

또한, 이 오류는 로컬 환경에서 잘 작동하는 것과 서버 환경에서 작동하지 않는 경우가 있는데, 이는 배포 과정에서 환경 변수가 배포 서버에 제대로 설정되지 않았기 때문일 수도 있습니다.

가장 기본적인 확인 점검 후 여전히 문제가 해결되지 않으면 Firebase 프로젝트 설정에서 API 키가 활성화되어 있는지, 해당 키에 대한 접근 권한이 올바르게 설정되어 있는지 확인해보아야 합니다.

그리고는 useSignup.jssignup 함수 내부에서 createUserWithEmailAndPasswordupdateProfile 함수를 사용하고 있습니다만, updateProfile 함수에 대한 사용이 잘못된 것 같습니다. updateProfileappAuth.currentUser를 직접 호출하는 것이 아니라, 성공적으로 생성된 유저 인스턴스 user를 사용해야 합니다.

수정 예:

updateProfile(user, { displayName }) // userCredential.user를 사용

위의 단계를 모두 확인하고 정정해도 문제가 지속된다면, 제공하신 에러 스크린샷과 코드를 바탕으로 좀 더 구체적인 조치를 취해보실 수 있습니다. 필요한 경우 환경 설정이나 코드에 더 깊은 이슈가 있을 수 있으니, 이 부분을 추가로 검토해보시기 바랍니다.

모든 가능성을 체크하셨음에도 문제가 해결되지 않는 경우, 해당 서비스의 지원 팀에 문의하시는 것도 좋은 방법입니다.

원하는 답변을 찾지 못하셨다면 인프런 문의하기를 이용해보세요.