adrianhajdin / project_mern_memories

This is a code repository for the corresponding video tutorial. Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called "Memories" and it is a simple social media app that allows users to post interesting events that happened in their lives.
https://youtube.com/playlist?list=PL6QREj8te1P7VSwhrMf3D3Xt4V6_SRkhu
5k stars 1.84k forks source link

OAuth Problems #130

Open Gamechanger-coder opened 2 years ago

Gamechanger-coder commented 2 years ago

My GoogleLogin is successfully but i cant take the data to the Navbar. Need help?

My Code:

_import React, { useState, useEffect} from 'react'; import {AppBar, Typography, Avatar, Toolbar, Button } from '@material-ui/core'; import { Link } from 'react-router-dom';

import useStyles from './styles.js'; import memories from '../../images/memories.png';

const Navbar = () => { const classes = useStyles(); const [user, setUser] = useState(JSON.parse(localStorage.getItem('profile'))); //profile //const user = null; console.log(user);

useEffect(() => {
    const decoded = user?.credential;
    // JWT...
    setUser(JSON.parse(localStorage.getItem('user')))
}, []);

return (
    <AppBar className={classes.appBar} position="static" color="inherit">
    <Link to="/" className={classes.brandContainer}>
        <Typography component={Link} to="/" className={classes.heading} variant="h2" align="center">Boboo</Typography>
        <img className={classes.image} src={memories} alt="memories" height="60"/>
    </Link>
    <Toolbar className={classes.toolbar}>
        {user?.result ? (
            <div className={classes.profile}>
                <Avatar className={classes.purple} alt={user?.result.name} src={user?.result.imageUrl}>{user?.result.name.charAt(0)}</Avatar>
                <Typography className={classes.userName} variant="h6">{user?.result.name}</Typography>
                {/* <Button variant="contained" className={classes.logout} color="secondary" onClick={logout}>Logout</Button> */}
                <Button variant="contained" className={classes.logout} color="secondary">Logout</Button>
            </div>
            ) : (
            <Button component={Link} to="/auth" variant="contained" color="primary">Sign In</Button>
            )}
        </Toolbar>
    </AppBar>
    );
};

export default Navbar;_
rua02me commented 2 years ago

how you add the google login ?

Gamechanger-coder commented 2 years ago
( )} onSuccess={googleSuccess} onError={googleFailure} cookiePolicy="single_host_origin" />

Thats my Google Log In

rua02me commented 2 years ago

then same problem with me.... I also check my database, it didnt have the user. I think need add sth else to the auth or the api to capture the info from google and add them into our database...

0xMALVEE commented 2 years ago

google auth has a new api now. it's called the google identity services. I made a video on how to use it here https://youtu.be/TqlVP_IkS28