React/TS study - twitter clone(3)

 

        try {

            await createUserWithEmailAndPassword(auth, email, password);

        }

try에서 await 를 통해서 email과 password를 이용해 사용자 생성하기.

email 중복여부 체크 및 비밀번호 유효성 검사

 

 

 

    const onSubmit = async (e : React.FormEvent<HTMLFormElement>) => {

createUserWithEmailAndPassword는 async 함수에서만 사용이가능하므로 변경해주기

 

 

https://ko.javascript.info/async-await

async와 await

 

 

        if( isLoading || name === "" || email === "" || password === "" ) return;

isLoading이  True이거나 입력값이 공백이면 함수를 종료시키는 return 작성

 

 

 

        try {

            const credentials = await createUserWithEmailAndPassword(auth, email, password);

            console.log(credentials.user);

            await updateProfile(credentials.user, {

                displayName : name

            });

        }

계정을 만든이후에 사용자가 이름을 설정 할 수 있게 추가적으로 name값을 받는다.

 

 

    const navigate = useNavigate();

index페이지로 보내기 위해 useNavigate hook 사용 (react router dom)

 

 

            navigate("/");

name값을 받고 업데이트를 한 이후에 사용자를 index페이지로 보낸다.

 

 

setLoading(true);

try문 안에 작성하여 로딩시 사용자에게 로딩여부를 보여준다.

 

로그인한 사용자는 protected route를 볼수있고 로그인하지 않은경우 로그인페이지나 회원가입 페이지로 보낸다.

 

 

 

export default function ProtectedRoute({

  children,

}: {

  children: React.ReactNode;

}){

    return children

}

ProtectedRoute 파일 생성후 TS에게 children은 React.ReactNode 라고 명시하기

 

 

    const user = auth.currentUser

Firebase에 유저정보를 요청하여 로그인여부 검증하기

user는 user정보나 null값을 반환한다.

 

    if(user === null) {

        return <Navigate to="/login"/>

    }

Navigate는 user를 다른곳으로 redirect 해주는 component

user가 null일경우에는 로그인 페이지로 보내주기.

 

 

    children: [

      {

        path: "", // 위와 동일한 path 경로를 갖는다

        element: <ProtectedRoute><Home /></ProtectedRoute>,

      },

      {

        path: "profile",

        element: <ProtectedRoute><Profile /></ProtectedRoute>,

      },

    ],

홈페이지와 프로필페이지를 보호하기

ProtectedRoute의 children으로 보내진다.

 

 

 

    path: "/",

    element: <ProtectedRoute><Layout /></ProtectedRoute>,

    children: [

children요소에 개별적으로 ProtectedRoute를 적용하거나

Home과 Profile을 감써고있는 상위 element의 Layout에 적용해준다.

 

 

 

 

export default function Home() {

    const logOut = () => {

        auth.signOut();

    }

    return <h1><button onClick={logOut}>Log out</button></h1>;

}

로그아웃을 위한 함수와 onClick이벤트를 생성한다.

 

 

 

catch (e) {

            if (e instanceof FirebaseError) {

                console.log(e.code, e.message);

            }

        }

FirebaseError가 instance인 경우 e.code를 통해 에러 내용을 콘솔에 출력한다

 

 

const errors = {

    "auth/email-already-in-use" : "That email already exists."

}

출력된 에러를 key값으로 출력할 문구를 작성하는 변수를 선언해줄 수 있다.

 

 

        setError("");

onSubmit에 에러를 초기화해주는 코드를 추가해줘서 버튼을 누르면 에러가 사라지게 한다.

 

 

 

await signInWithEmailAndPassword(auth, email, password);

login.tsx 파일에서 try문 안에 작성한다.

 

 

        <Switcher>

            Don't have an account? {" "}

            <Link to="/create-account">Create one &rarr;</Link>

        </Switcher>

error 출력부분 밑에 회원가입으로 이동시킬수있게 작성한다.

동일한 방식으로 회원가입폼에서도 로그인으로 이동시킬 수 있게한다.

 

 

const Switcher = styled.span`

    margin-top: 20px;

    a {

        color : #1d9bf0;

        text-decoration : none;

    }

`;

Switcher에 대한 css 속성값을 작성해준다.

 

 

로그인과 회원가입 tsx에서 공통된 부분을  component로 만들어줄 파일을 생성한다.

 

export const Title = styled.h1`

    font-size: 42px;

`;

위와같이 export를 앞에 붙여준다.

로그인과 회원가입 파일에 가서 해당부분을 import 해준다.

 

 

github 소셜로그인을 위한 환경설정은

https://rangbits.tistory.com/19

(이전버전/JS)React study - twitter clone(1)

이전글 참고해서 작성

 

 

<Logo src="/github-logo.svg" />

로고로 사용할이미지를 svg 파일로 작성하여 프로젝트 public 폴더에서 src를 통해서 가져온다

 

 

export default function GithubButton() {

    const onClick = () => {}

    return (

    <Button onClick={onClick}>

        <Logo src="/github-logo.svg" />

        Continue with Github

    </Button>

    );

}

github-btn.tsx 파일에서 onClick 이벤트를 생성해준다.

 

 

 

    const navigate = useNavigate();

    const onClick = async () => {

        try {

            const provieder = new GithubAuthProvider();

            await signInWithPopup(auth, provieder);

            navigate("/");

        } catch (error) {

            console.error(error);

        }

    }

onClick이벤트에 provieder값을 가져와서 signInWithPopup()으로 팝업창을 띄워 Github연동여부를 묻는다.

 

 

            await signInWithRedirect(auth, provieder);

팝업대신에 signInWithRedirect()를 사용하면 새창을 생성하지않고 페이지 이동을 통해서

 Github연동여부를 묻는다.

취소하거나 연결하면 다시 index페이지로 이동

 

 

Admin창에서 Provider에 Github를 configure했는지 확인해야함. ( Firebase Authentication 에서 깃허브 연결해주기)

 

 

기존 사이트에서 회원가입한 이메일과 github이메일이 동일할 경우 발생하는 오류

 

 

 

firebase 환경에서 비밀번호 변경을 front로 출력하기 위해서