의류 쇼핑몰 23 | Authentication 끝 | 로그인시 에러처리 | Authentication Styles

에러 발생 

1. Sign In 시  비밀번호가 틀리긴 경우 

Sign In 시 비밀번호가 틀긴 경우에는 

 

 

 

콘솔 error.code에서  auth/wrong-password 메세지가 뜬다.

 

 

그러면 error.code가 auth/wrong-password가 같은 아닌지에 따라 에러인지를 체크할 수 있다. 

 

 

잘못된 비번을 입력하였더니 alert 창이 떴다. 

 

 

2. 이메일이 없는 경우 

회원가입이 안된 이메일을 입력한 경우

auth/user-not-found 에러가 뜬다. 

 

 

 

 

3. switch / case로 간단히 적어주기  

 

if/else if 로 쓰는 방법도 있지만 

 

 

switch / case로 적어준다.

break가 읽히면 그 뒤 코드를 보지 않고 나간다. 

 

에러 코드 전체 리스트는 아직 구글에서 제공하고 있지 않고 있다. 

 

 

 구글 로그인 에러처리 

또 하나의 문제는 google 로그인을 누르면

로그인 하라고 팝업이 뜨는 동시에 email 에러 사인도 같이 뜬다. 

 

 

google의 버튼 type을 그냥 버튼으로 설정해 준다. 

sign-in-form.jsx

import { useState } from 'react';

import {

signInWithGooglePopup,

createUserDocumentFromAuth,

signInAuthUserWithEmailAndPassword

} from '../../utils/firebase';

import FormInput from '../form-input/form-input';

import Button from '../button/button'

import './sign-in-form.scss';

const defaultFormFields = {

email: '',

password: '',

}

const SignInForm = () => {

const [formFields, setFormFields] = useState(defaultFormFields);

const { email, password } = formFields;

const resetFormFields = () => {

setFormFields(defaultFormFields)

}

const signInWithGoogle = async () => {

const { user } = await signInWithGooglePopup();

await createUserDocumentFromAuth(user);

}

const handleSubmit = async (event) => {

event.preventDefault();

try {

const response = await signInAuthUserWithEmailAndPassword(email, password);

console.log(response)

resetFormFields();

} catch (error) {

switch (error.code) {

case 'auth/wrong-password':

alert('incorrect password for email');

break

case 'auth/user-not-found':

alert('no user associated with this email')

break;

default:

console.log(error);

}

console.log(error);

}

}

const handleChange = (event) => {

const { name, value } = event.target;

setFormFields({ ...formFields, [name]: value })

}

return (

<div className='sign-up-container'>

<h2>Already have an account ? </h2>

<span>Sign in with your email and password</span>

<form onSubmit={handleSubmit}>

<FormInput

label='Email '

type='email'

required

onChange={handleChange}

name='email'

value={email}

/>

<FormInput

label='Password '

type='password'

required

onChange={handleChange}

name='password'

value={password}

/>

<div className='buttons-container'>

<Button type='submit'>Sign In</Button>

<Button type='button' onClick={signInWithGoogle} buttonType='google'>

Google Sign In

</Button>

</div>

</form>

</div>

)

}

export default SignInForm;

 

 

---

 Authentication Styles 

Authentication.jsx에서 쓰지 않는 import를 삭제하고 

 

 

 

클래스를 추가하고 scss 파일을 import 한다.

 

 

 

authentication.scss를 만든 후 내용을 채운다.    

.authentication-center {

display: flex;

width: 900px;

justify-content: space-between;

margin: 30px auto;

}

 

 

정리된 화면이 나왔다. 

 

 

 

이제는 유저가 로그인 한 후 어떤 화면이 보여져야 하는지 알아보자.