Unable to Login

[cleverprogrammers]

Unable to Login

[SuyashPatil-29]

I have completed the Login Page but when I click on Login I am unable to get the dashboard. In Firebase I am able to see the logged email id but unable to Login in the App. In the video on yt, I have completed till 1:58:00. Help me

https://www.youtube.com/watch?v=R_OERlafbmw

Could you send your login page code snippet

[SuyashPatil-29]

Hello @Priti-28,
So the video being about a year ago, I do not think so that the react navigate.push is what is used nowadays. Even I faced the same issue and found my way around it using the useNavigate from react-router-dom

i would suggest you figure your way around it but if u still face an issue, here is how i did it

[SuyashPatil-29]

@Priti-28 can you post your header section code so I can cross-check it with mine?

[SuyashPatil-29]

here's my code, maybe try replacing it w yours w a few tweeks to the css according to how it fits you @Priti-28

[Priti-28]

[Priti-28]

I did it , still it's not working.

[Priti-28]

import { useEffect } from "react";
import styled from 'styled-components';
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { auth, provider } from "../firebase";
import {
selectUserName,
selectUserPhoto,
setSignOutState,
setUserLoginDetails,
} from "../features/user/userSlice";
import TextField from "@mui/material/TextField"
import SearchBar from "./SearchBar";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const Header = (props) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const userName = useSelector(selectUserName);
const userPhoto = useSelector(selectUserPhoto);

    useEffect(() => {
        auth.onAuthStateChanged(async (user) => {
            if(user) {
                setUser(user);
                navigate("/home");
            }
        });
    }, [userName]);

    const handleAuth = () => {
        if (!userName) { 
        auth
        .signInWithPopup(provider)
        .then((result) => {
            setUser(result.user);
        })
        .catch((error) => { 
            alert(error.message);
        });
    } else if (userName) {
        auth.signOut().then(() => {
            dispatch(setSignOutState())
            navigate('/')
        })
        .catch((err) => alert(err.message));
    }
 };

    const setUser = (user) => {
        dispatch(
            setUserLoginDetails({
                name: user.diplayName,
                email: user.email,
                photo: user.photoURL,
            })
        );
    };

return (
<Nav>
    <Logo>
        <img src="/images/logo.png" alt="Learn" />
    </Logo>

     {!userName ? (
      <Login onClick = {handleAuth}>Login</Login> 
    ) : (
      <>   
       <NavMenu> 
            <a href='/home'>
                <img src="/images/home-icon4.png" alt="HOME" />
                <span>HOME</span>
            </a>
            <a>
                <img src="/images/Favourites.png" alt="Favourites" />
                <span>Favourites</span>
            </a>
            <a>
                <img src="/images/Settings.png" alt="Settings" />
                <span>Settings</span>
            </a>

           

            <SearchBar />
        </NavMenu>
        <SignOut>
        <UserImg src={userPhoto} alt={userName} />
            <DropDown>
                <span onClick={handleAuth}>Sign out</span>
            </DropDown>
        </SignOut>
        
      </>
    )} 
</Nav>
);   

};

const Nav = styled.navposition: fixed; // It stays Fixed while scrolling top: 0px; left: 0; left: 0; right: 0; height: 70px; background-color: #090b13; display: flex; justify-content: space-between; align-items: center; padding: 0 36px; letter-spacing: 16px; z-index: 3;

const Logo = styled.apadding: 0; width: 80px; margin-top; 4px; max-height: 70px; font-size: 0; display: inline-block; img { display: block; width: 200%; // size of logo become smaller }

const NavMenu = styled.div`
align-items: center;
display: flex;
flex-flow: row nowrap;
height: 100%;
justify-content: flex-end;
padding: 0px;
position: relative;
margin-right: auto;
margin-left: 25px;

a {
display: flex;
align-items: center;
padding: 0 5px;

img {
height: 20px;
min-width: 20px;
width: 20px;
z-index: auto;
}

span {
color: rgv(240, 249, 249);
font-size: 13px;
letter-spacing: 1.42px;
line-height: 1.08;
padding: 2px 0px;
white-space: nowrap;
position: relative;

&:before {
    background-color: rgb(249, 249, 249);
    border-radius: 0px 0px 4px 4px;
    bottom: -6px;
    content: "";
    height: 2px;
    left: 0px;
    opacity: 0;
    position: absolute;
    right: 0px;
    transform-origin: left-center;
    transform: scalex(0);
    transition: all 250ms cubic-beizer(0.25, 0.46, 0.45, 0.94) 0s;
    visibility: hidden;
    width: auto;
}

}

&:hover {
    span:before {
        transform: scalex(1);
        visibility: visible;
        opacity: 1;
    }
}

}
`;

const Login = styled.a`
background-color: rgba(0,0,0,.6);
padding: 8px 16px;
text-transform: uppercase;
letter-spacing: 1.5px;
border: 1px solid #f9f9f9;
border-radius: 5px;
transition: all 0.2s ease 0s;

&:hover {
background-color: #f9f9f9;
color: #000;
border-color: transparent;
}
`;

const UserImg = styled.imgheight: 100%;;

const DropDown = styled.divposition: absolute; top: 48px; right: 0px; background:rgb(19, 19, 19); border: 1px solid rgba(151, 151, 151, 0.34); border-radius: 4px; box-shadow: rgb(0 0 0/ 50%) 0px 0px 18px 0px; padding: 10px; font-size: 14px; letter-spacing: 3px; width: 100px; opacity: 0;;

const SignOut = styled.div`
position: relative;
height: 48px;
width: 48px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;

${UserImg} {
border-radius: 50%;
width: 100%;
height: 100%;
}

&:hover {
${DropDown} {
opacity: 1;
transition-duration: 1s;
}
}
`;

export default Header;

//npm install @reduxjs/toolkit
// npm install redux

// line 78

{/*


Sign out

*/}

[SuyashPatil-29]

import styled from "styled-components";
import { useDispatch, useSelector } from "react-redux";
import React, {useEffect} from 'react';
import { auth, provider } from "../firebase";
import { selectUserName, selectUserPhoto, setUserLoginDetails, setSignOutState } from "../features/user/userSlice";
import { useNavigate } from "react-router-dom";

const Header = () => {

const dispatch = useDispatch()
const userName = useSelector(selectUserName)
const userPhoto = useSelector(selectUserPhoto)
const navigate = useNavigate()

useEffect(()=>{
    auth.onAuthStateChanged(async (user)=>{
        if(user){
            setUser(user)
            navigate("/home")
        }
    })
},[userName])
        const handleAuth =()=>{
            if(!userName){
            auth.signInWithPopup(provider).then((result)=>{
                setUser(result.user)
            }).catch((error)=>{
                alert(error.message)
            })
    } else if(userName)
        auth.signOut().then(()=>{
            dispatch(setSignOutState())
            navigate("/")
        }).catch((error)=>alert(error.message))
    }

        const setUser = (user)=>{
            dispatch(setUserLoginDetails({
                name: user.displayName,
                email: user.email,
                photo: user.photoURL
            }))
        }

        return (
            <Nav>
              <Logo>
                <img src="/images/logo.svg" alt="Disney+" />
              </Logo>
        
              {!userName ? (
                <Login onClick={handleAuth}>Login</Login>
              ) : (
                <>
                  <NavMenu>
                    <a href="/home">
                      <img src="/images/home-icon.svg" alt="HOME" />
                      <span>HOME</span>
                    </a>
                    <a href="/home">
                      <img src="/images/search-icon.svg" alt="SEARCH" />
                      <span>SEARCH</span>
                    </a>
                    <a href="/home">
                      <img src="/images/watchlist-icon.svg" alt="WATCHLIST" />
                      <span>WATCHLIST</span>
                    </a>
                    <a href="/home">
                      <img src="/images/original-icon.svg" alt="ORIGINALS" />
                      <span>ORIGINALS</span>
                    </a>
                    <a href="/home">
                      <img src="/images/movie-icon.svg" alt="MOVIES" />
                      <span>MOVIES</span>
                    </a>
                    <a href="/home">
                      <img src="/images/series-icon.svg" alt="SERIES" />
                      <span>SERIES</span>
                    </a>
                  </NavMenu>
                  <SignOut>
                    <UserImg src={userPhoto} alt={userName} />
                    <DropDown>
                        <span onClick={handleAuth}>Sign Out</span>
                    </DropDown>
                  </SignOut>
                </>
              )}
            </Nav>
          );
        };

const UserImg = styled.imgheight: 50px; margin-right: 80px; margin-top: 7px; border-radius: 25px;

const Nav= styled.navposition: fixed; top: 0; left: 0; width: 100%; height: 70px; background-color: #090b13; display: flex; justify-content: space-between; align-items: center; padding: 0 36px; letter-spacing: 1rem; z-index: 3;
const Logo = styled.a`
padding: 0;
width: 80px;
margin-top: 4px;
max-height: 70px;
font-size: 0;
display: inline-block;
cursor: pointer;

img{
display: block;
width: 100%;
}
`

const NavMenu = styled.div`
display: flex;
align-items: center;
flex-flow: row nowrap;
margin: 0 auto 0 25px;
height: 100%;
justify-content: flex-end;
padding: 0;

a{
display: flex;
align-items: center;
padding: 0 12px;

img{
    height: 22px;
    min-width: 20px;
    z-index: auto;
    margin-bottom: 2.5px;

}

span{
    color: rgb(249,249,249);
    font-size: 16px;
    letter-spacing: 1.42px;
    line-height: 1.08em;
    padding: 2px 4px;
    white-space: nowr                            ap;
    position: relative;
   
   
    &:before{
       background-color: rgb(249,249,249);
       border-radius: 0 0 4px 4px;
       bottom: -6px;
       content: "";
       height: 2px;
       left: 0px;
       opacity: 0;
       position: absolute;
       right: 0;
       transform-origin: left center;
       transform: scaleX(0);
       transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
       visibility: hidden;
       width: auto;
   }

}

&:hover{
  span:before{
      transform: scaleX(1);
      visibility: visible;
      opacity: 1 !important;
  }
}

}

@media (max-width: 955px){
display: none;
}

`

const Login = styled.a`
margin-right: 80px;
padding: 12px 16px;
text-transform: uppercase;
letter-spacing: 1.5px;
background-color: rgba(0,0,0,0.6);
border: 1px solid rgb(249,249,249);
border-radius: 4px;
font-weight: 500;
transition: all 0.2s ease-out 0s;

&:hover{
background-color: rgb(249,249,249);
color: #090b13;
/* transform : ; */
}
`

const DropDown = styled.divposition: absolute; top: 60px; right: 130px; background: rgb(19,19,19); border: 1px solid rgba(151, 151, 151, 0.34); letter-spacing: 3px; border-radius: 4px; box-shadow: rgb(0 0 0 /50%) 0 0 18px 0px; padding: 10px; font-size: 14px; width: 120px; height: 45px; display: flex; align-items: center; justify-content: center; opacity: 0; cursor: default;

const SignOut = styled.div`
cursor: pointer;

&:hover{
${DropDown}{
opacity: 1;
transition: 1s;
}
}
`

export default Header;

[Priti-28]

ok , Thanks I'll try .