Scribd
Upload
54 views

Auth Js

This document defines an Auth component in React that handles user authentication. It uses the useState hook to manage form data and whether the user is signing up or signing in. It dispatches actions to sign in or sign up the user using the credentials or Google login. The component renders a form with inputs for credentials and buttons to submit, toggle between sign in and sign up, and login with Google.

Uploaded by

Abheet Singh
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
54 views

Auth Js

This document defines an Auth component in React that handles user authentication. It uses the useState hook to manage form data and whether the user is signing up or signing in. It dispatches actions to sign in or sign up the user using the credentials or Google login. The component renders a form with inputs for credentials and buttons to submit, toggle between sign in and sign up, and login with Google.

Uploaded by

Abheet Singh
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useState } from 'react';

import useStyles from './styles';


import { Avatar, Button, Paper, Grid, Typography, Container } from
'@material-ui/core';
//import { Component } from 'react';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Input from './input';
import { GoogleLogin } from 'react-google-login';
import Icon from './icons';
import {useDispatch} from 'react-redux'; //hook
import {signin,signup} from '../../actions/auth';
import {useHistory} from 'react-router-dom';

const
initialState={firstName:'',lastName:'',email:'',password:'',confirmPassword:''};

const Auth = () => {

const classes = useStyles();


const [isSignup, setIsSignup] = useState(false);
const dispatch=useDispatch();
const [showPassword, setShowPassword] = useState(false);
const history=useHistory();
const [formData,setFormData]=useState(initialState);

const handleSubmit = (e) => {


e.preventDefault(); //to avoid form refreshing by browser (happens
by default)
// console.log(formData);

if(isSignup){
dispatch(signup(formData,history))
}
else{
dispatch(signin(formData,history))

}
};

const handleChange = (e) => {


setFormData({...formData,[e.target.name]:e.target.value}); //going to
spread all the other properties but CHANGE only the one
//specific that
your on with the target value
};

const switchMode = () => {


setIsSignup((prevIsSignup) => !prevIsSignup);
setShowPassword(false);
};

const handleShowPassword = () => setShowPassword((prevShowPassword) => !


prevShowPassword);

const googleSuccess= async (res)=>{


const result =res?.profileObj; //in case of . ->'cannot get property
profileObj of undefined'. So use sepcial operator ?. which will word even if we
dont get res due to some issue
const token=res?.tokenId;
try{
dispatch({type:'AUTH',data:{result,token}});
history.push('/');

}
catch(error){
console.log(error);
}
}

const googleFailure=(error)=>{

console.log("Google Sign in was unsuccessful.Try again later");


}

return (
<Container component="main" maxWidth="xs">
<Paper className={classes.paper} elevation={3}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>

<Typography variant="h5">{isSignup ? 'Sign up' : 'Sign


in'}</Typography>

<form className={classes.form} onSubmit={handleSubmit}>


<Grid container spacing={2}>
{
isSignup && (
<>
<Input name="firstName" label="First Name"
handleChange={handleChange} autofocus half />
<Input name="lastName" label="Last Name"
handleChange={handleChange} half />
</>
)
}
<Input name="email" label="Email Address"
handleChange={handleChange} type="email" />
<Input name="password" label="Password"
handleChange={handleChange} type={showPassword ? "text" : "password"}
handleShowPassword={handleShowPassword} />
{isSignup && <Input name="confirmPassword" label="Repeat
Password" handleChange={handleChange} type="password" />}
</Grid>

<Button type="submit" fullWidth variant="contained"


color="primary" className={classes.submit}>
{isSignup ? 'Sign up' : 'Sign in'}
</Button>

<GoogleLogin
clientId="130425960788-
gqiutj16llctqdfhs4vu1449to0jnfid.apps.googleusercontent.com"
render={(renderProps) => (
<Button
className={classes.googleButton}
color='primary'
fullWidth
onClick={renderProps.onClick}
disabled={renderProps.disabled}
startIcon={<Icon />}
variant="contained">
Google Sign in
</Button>
)}
onSuccess={googleSuccess}
onFailure={googleFailure}
cookiePolicy="single_host_origin"

/>

<Grid container justify="flex-end">


<Grid item>
<Button onClick={switchMode}>
{isSignup ? 'Already have a account? Sign in' :
"Don't have an account? Sign up"}
</Button>
</Grid>

</Grid>
</form>
</Paper>
</Container>
)
};

export default Auth;

You might also like