의류 쇼핑몰 22 | 새 sign-in-form

 authentication 파일 만들기 

이 전에 만들었던 sign-in 은 내용이 authentication에 더 가깝다. 

폴더와 파일명을 바꿔준다. 

 

 

sign-in에서 Authentication으로 이름을 바꿔주었다. 

 

 

App.js에도 path, element 와 import 의 이름을 바꿔준다. 

 

 

navigation 파일에서도 내용을 바꿔준다

 

 

 http://localhost:3001/auth 으로 route를 바꿔주면

이 전 모습 그대로 나오는 것을 볼 수 있다. 

 

 

---

 새 sign-in 파일 만들기 

 

이제 sign-in 컴포넌트를 만들어보자. 

 

1. sign-in-form 폴더와 파일을 만든다. 

 

2. 모습은 sign-up-form과 상당히 유사하므로

이 sign-up-form 폴더와 파일을 복사해서 

컴포넌트로 붙여넣기 한 후 이름을 sign-in으로 바꿔준다. 

 

이제는 붙여 넣기 한 sign-up-form에서 내용을 수정해야 한다. 

 

3. firebase에서 import 한 createAuthUserWithEmailAndPassword를 회원가입하는게 아니므로 지운다.

4. displayName과 confirmPassword는 필요없으니 관련된 코드는 지운다.

5. try / catch 도 내용을 바꿔줘야하니 내용을 지운다. 

 

 

 

 

6. 일단은 authenticaiton에  SignInForm을 plug in 한다.

7. authentication에 있는 logGoogleUser 메소드도 필요없으니 sign-in-form으로 옮긴다. 

 

 

 

8.   logGoogleUser 메소드 이름을 좀 더 이해하기 쉽게 c 메소드 이름으로 바꿔주고

signInWithGooglePopup을 firebase에서 import 하여 구글 팝업창이 뜨도록 설정한다. 

 

 

 

9. 구글 버튼 만들어서 signInWithGoogle 메소드를 부른다. 

함수를 호출해서 구글로 가기때문에 type='submit' 은 필요없다.

sign-in-form

 

로그인 화면이 잘 나오는 것을 볼 수있다.

 

 

 

구글 팝업도 잘 뜬다. 

 

 

 sign in 했을 때 firebase 로그인 과정 만들기 

이제 email, password로 sign in을 했을 때 과정을 만들어보자. 

 

firebase에서 signInWithEmailAndPassword를  Import 한다.

firebse.js

 

 

이제 firebase 파일로 가서

위에 있는 createAuthUserWithEmailAndPassword 형식을 따라

signInWithEmailAndPassword로 바꿔 export 해준다. 

firebse.js

 

 

SignInForm으로 돌아가서

signInAuthUserWithEmailAndPassword를 import 한 후 

이메일고 비번을 넣어 함수를 실행 시켜 firebase authentication에 들어가게 한다. 

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;

 

 

이미 회원가입이 된 이메일을 넣으면 

 

 

콘솔에 유저 오브젝트가 뜨고 

 

 

input은 빈칸으로 리셋이 된다. 

 

---

 Button Styles 

 

sign-in-form.scss 파일을 만든 후 sign-up-form.scss 내용을 복사한 후 

buttons-container 클래스 내용도 추가한다. 

 

 

버튼 스타일을 추가하자.

 

 

버튼 스타일이 잘 들어갔다.