📆 위클리 플래너 - 첫화면, 로그인

 

 

1. 첫화면 

 

 

2. 회원가입 

firebase를 활용하여 로그인, 회원가입을 구현하였다. 

firebase에서 프로젝트를 만들고 해당 프로젝트의 build - Authentication - Sign in method를 통해 사용할 로그인 방법을 설정한다. 

// firebaseConfigure.js(별도로 생성해야하는 파일) 

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from 'firebase/auth';



import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage'

const firebaseConfig = {
  //생략
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

export const googleProvider = new GoogleAuthProvider()

firebase 세팅 js파일에 위 함수를 추가한다. 

import { useState } from 'react';
import { auth } from '../config/firebase'
import { createUserWithEmailAndPassword } from 'firebase/auth';

const SignIn = () => { 

    // 이메일, 비밀번호를 저장할 state
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    // 회원가입 함수 
    const signIn = async () => { 

        // 이메일 정규표현식 
        let emailCheck = new RegExp('[a-z0-9]+@[a-z]+\.[a-z]{2,3}');
        
        if(!emailCheck.test(email)){
            alert("이메일을 올바르게 작성해주세요.");
            return;
        }
        
        // firebase로 정보 보내기 
        await createUserWithEmailAndPassword(auth, email, password);

        // 회원가입 완료 안내 
        alert(email + " 님의 회원가입이 완료되었습니다.")

        // 가입 완료 후 input 비우기 
        setEmail("");
        setPassword("");

    }


    return <div className="SignIn">
        <div>
            <label>Email</label>
            <input onChange={(e)=> setEmail(e.target.value)} value={email}/>
        </div>
        <div>
            <label>Password</label>
            <input type="password" onChange={(e)=> setPassword(e.target.value)} value={password}/>
        </div>

        <button onClick={signIn}>Sign in</button>
    </div>
}

export default SignIn;

 

3. 로그인 - 일반 / 구글 

    import { auth, googleProvider } from '../config/firebase'
    import { signInWithEmailAndPassword, signInWithPopup } from "firebase/auth"

    // 일반 로그인
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();
    const navigate = useNavigate();

    // 로그인 함수 
    const handleLogin = async () => { 
        try{ 
            await signInWithEmailAndPassword(auth, email, password);
            navigate('/');
        } catch(err){
            if (err.code == 'auth/invalid-email') {
                alert('잘못된 이메일 형식입니다.');
              }
              if (err.code == 'auth/user-not-found') {
                alert('존재하지 않는 아이디입니다.');
              }
              if (err.code == 'auth/wrong-password') {
                alert('비밀번호를 다시 확인해주세요');
              }
              if (err.code == 'auth/too-many-requests') {
                alert('잠시 후 다시 시도해 주세요');
              }
            console.error(err);
        }
    } 

    
    // 구글 로그인
    const signInWithGoogle = async () => { 
        try {
            await signInWithPopup(auth, googleProvider);
            navigate('/');
        } catch(err){
            console.error(err);
        }
    }

 

회원가입을 할 땐 createUserWithEmailAndPassword()

일반 로그인은 signInWithEmailAndPassword

구글 로그인은 signInWithPopup과 googleProvider를 통해 할 수 있다.