Unable to Login
Opened this issue · 9 comments
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
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
Could you send your login page code snippet
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
I did it , still it's not working.
@Priti-28 can you post your header section code so I can cross-check it with mine?
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
*/}
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;
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
ok , Thanks I'll try .