11. Authentication - Github Login

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

github-btn.tsx

import { GithubAuthProvider, signInWithPopup } from "firebase/auth";
import { styled } from "styled-components";
import { useNavigate } from "react-router-dom";
import { auth } from "../routes/firebase";

const Button = styled.span`
  margin-top: 50px;
  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 navigate = useNavigate();
  const onClick = async () => {
    try {
      const provider = new GithubAuthProvider();
      await signInWithPopup(auth, provider);
      navigate("/");
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <Button onClick={onClick}>
      <Logo src="/github-logo.svg" />
      Continue with Github
    </Button>
  );
}

 

 

 

 

 

nwitter-reloaded.z01

19.53MB

nwitter-reloaded.z02

19.53MB

nwitter-reloaded.z03

19.53MB

nwitter-reloaded.z04

19.53MB

nwitter-reloaded.z05

19.53MB

nwitter-reloaded.zip

14.60MB