[노마드 코더] ReactJS 트위터 클론 코딩 - Github Login
이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)
https://nomadcoders.co/nwitter
트위터 클론코딩 – 노마드 코더 Nomad Coders
React Firebase for Beginners
nomadcoders.co
이번에는 소셜 로그인을 추가할 것이다. 먼저 firebase의 Authentication 페이지에서 - 로그인 방법 - 새 제공업체 추가를 눌러보자.
그러면 firebase에서 제공하는 여러 가지 로그인 방식을 볼 수 있다. 여기서 github을 클릭해 준다.
사용 설정을 눌러주고 https://github.com/settings/developers로 이동한다. New OAuth App을 클릭해서 OAuth application을 만들어준다.
Application name에 이름을 만들어 주고, Homepage URL에 주소를 넣어준다. (현재 URL이 없기 때문에 아무 URL이나 넣어주어도 상관없다.) 그리고 가장 중요한 Authorization callback URL에 firebase에서 제공해 준 콜백 URL을 넣어준다.
Register application을 클릭하면 이제 Client ID와 Client secrets를 얻을 수 있다.
이 값들을 입력해 주면 된다.
입력 후 저장을 눌러주면
이제 이메일/비밀번호와 GitHub의 두 가지 방법으로 로그인이 가능하다. 이제 코드로 가보자.
component 폴더에 github-btn.tsx 파일을 생성해 준다. https://github.com/logos에 들어가서 로고를 다운로드하고 github-mark.png 파일을 public폴더에 넣어준다. 또는 github-logo.svg 파일을 생성해 준 후 아래의 주소를 붙여 넣여 넣자.
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>이제 gihub-btn.tsx 코드를 작성해 준다.
import { GithubAuthProvider, signInWithPopup } from "firebase/auth";
import styled from "styled-components"
import { auth } from "../firebase";
const Button = styled.span`
margin-top: 40px;
background-color: white;
font-weight: 500;
width: 100%;
color: black;
padding : 10px 20px;
border-radius: 50px;
border: 0;
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
cursor: pointer;
`;
const Logo = styled.img`
height: 25px;
`;
export default function GithubButton() {
const onClick = async () => {
try {
const provider = new GithubAuthProvider();
await signInWithPopup(auth, provider);
navigate("/");
} catch (error) {
console.log(error);
}
};
return (
<Button onClick={onClick}>
<Logo src="/github-logo.svg" />
Continue with Github
</Button>
);
}login.tsx와 created-account.tsx의 마지막에 컴포넌트를 삽입해 준다.
이제 github 로그인 버튼이 생성되었다. 다시 github-btn.tsx로 돌아가서 Button에 onClick함수를 연결해 준다.
export default function GithubButton() {
const onClick = async () => {
try {
const provider = new GithubAuthProvider();
await signInWithPopup(auth, provider);
navigate("/");
} catch (error) {
console.log(error);
}
};
return <Button onClick={onClick}>
<Logo src="/github-logo.svg" />
Continue with Github
</Button>
}여기서 provider의 GithubAuthProvider() 함수는 반드시 firebase/auth의 항목을 import 해주어야 한다!
그리고 signInWithPopup() 함수는 인자로 auth와 provider 두 가지를 받는다. 이제 button을 클릭해 보자.
인증 팝업창이 뜨게 된다. Authorize를 누르면
메인 페이지로 로그인이 되었다. 주의할 점은 github login 또한 email주소 기반이기 때문에 이미 등록된 이메일이라면 로그인이 되지 않고 에러가 난다. 일단은 같은 email이 있다면 삭제 후 진행하도록 하자.
이전 글 :
[노마드 코더] ReactJS 트위터 클론 코딩 - Router
[노마드 코더] ReactJS 트위터 클론 코딩 - Authentication
다음 글 :
[노마드 코더] ReactJS 트위터 클론 코딩 - Tweeting
[노마드 코더] ReactJS 트위터 클론 코딩 - Uploading Images with S3
[노마드 코더] ReactJS 트위터 클론 코딩 - Fetching Timeline
[노마드 코더] ReactJS 트위터 클론 코딩 - Realtime Tweets & Delete