trouble making firebase authcheck with express/mongodb server from react - reactjs

Question

I am working on a project that requires firebase authorization with a custom server. I am using mongodb with express and mongoose. Client side is react. The trouble i am having can be seen using the login page as an example.
import React, { useState, useEffect } from 'react'
import {NavLink} from 'react-router-dom'
import axios from 'axios'
import * as Yup from 'yup';
import { Formik, Form, Field } from 'formik';
import {
CssBaseline,
Box,
Divider,
Container,
Card,
CardContent,
InputAdornment,
Icon,
IconButton,
Avatar,
FormHelperText,
Button,
TextField,
Link,
Grid,
Typography,
} from '#material-ui/core';
import Visibility from '#material-ui/icons/Visibility'
import VisibilityOff from '#material-ui/icons/VisibilityOff'
import { auth, googleAuthProvider } from '../../../firebase'
import { useSnackbar } from 'notistack'
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
import useStyles from './login-styles'
import googleIcon from '../../../assets/google.svg'
import useMediaQuery from '#material-ui/core/useMediaQuery';
import { useTheme } from '#material-ui/core/styles';
import { useDispatch, useSelector } from 'react-redux'
import useIsMountedRef from '../../../hooks/useIsMountedRef'
import AuthPage from '../AuthPage'
const initialValues = {
email: '',
password: ''
}
const validationSchema = Yup.object({
email: Yup.string().email().max(255).required(),
password: Yup.string().min(7).max(255).required('Password is required')
})
const createOrUpdateUser = async (authtoken) => {
return await axios.post(`${process.env.REACT_APP_API}/create-or-update-user`, {}, {
headers: {
authtoken
}
})
}
const Login = ({history}) => {
let dispatch = useDispatch()
const theme = useTheme();
const {user} = useSelector((state) => ({...state}))
const {enqueueSnackbar} = useSnackbar()
const classes = useStyles();
const isMountedRef = useIsMountedRef();
const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
const [passwordVisible, setPasswordVisible] = useState(false)
const togglePasswordVisibility = () => {
setPasswordVisible({ passwordVisible : !passwordVisible})
}
useEffect(() => {
if (user && user.token) {
history.push('/client-dash')
}
}, [user])
const handleGoogleClick = async () => {
auth.signInWithPopup(googleAuthProvider)
.then(async(result) => {
const { user } = result
const idTokenResult = await user.getIdTokenResult();
createOrUpdateUser(idTokenResult.token)
.then(res => console.log(' CREATE OR UPDATE RESPONSE', res))
.catch()
//send snackbar success email sent
enqueueSnackbar(`Welcome back, ${user.displayName}!`, {
variant: 'success'
})
// dispatch({
// type: 'LOGGED_IN_USER',
// payload: {
// email: user.email,
// token: idTokenResult,
// }
// });
// history.push('/client-dash')
})
.catch((err) => {
console.log(err)
enqueueSnackbar((err.message), {
variant: 'error'
});
})
}
return (
<AuthPage>
<CardContent className="flex flex-col items-center justify-center w-full py-96 max-w-320">
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Button
className={classes.googleButton}
fullWidth
onClick={handleGoogleClick}
size="large"
variant="contained"
>
<img
alt="Google"
className={classes.providerIcon}
src={googleIcon}
/>
Sign in with Google
</Button>
<Box
alignItems="center"
display="flex"
mt={2}
>
<Divider
style={{color: '#161616'}}
className={classes.divider}
orientation="horizontal"
/>
<Typography
style={{color: '#161616'}}
variant="body1"
className={classes.dividerText}
>
OR
</Typography>
<Divider
orientation="horizontal"
/>
</Box>
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={async(values, {
setErrors,
setStatus,
setSubmitting
}) => {
try {
const result = await auth.signInWithEmailAndPassword(values.email, values.password)
console.log(result);
const { user } = result
const idTokenResult = await user.getIdTokenResult()
createOrUpdateUser(idTokenResult.token)
.then(res => console.log(' CREATE OR UPDATE RESPONSE', res))
.catch()
//send snackbar success email sent
enqueueSnackbar(`Welcome back, ${user.displayName}!`, {
variant: 'success'
})
dispatch({
type: 'LOGGED_IN_USER',
payload: {
email: user.email,
token: idTokenResult,
}
});
if (isMountedRef.current) {
setStatus({ success: true });
setSubmitting(false);
history.push('/client-dash')
}
} catch (err) {
console.error(err);
enqueueSnackbar((err.message), {
variant: 'error'
});
if (isMountedRef.current) {
setStatus({ success: false });
setErrors({ submit: err.message });
setSubmitting(false);
}
}
}}>
{({ values,
errors,
handleBlur,
handleChange,
isSubmitting,
touched }) => (
<Form className={classes.form}>
<Field
name="email"
as={TextField}
error={Boolean(touched.email && errors.email)}
fullWidth
helperText={touched.email && errors.email}
label="Email Address"
margin="normal"
name="email"
onBlur={handleBlur}
onChange={handleChange}
type="email"
value={values.email}
variant='outlined'
autoFocus
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Icon className="text-20" color="action">
mail
</Icon>
</InputAdornment>
)
}}
/>
<Field
as={TextField}
error={Boolean(touched.password && errors.password)}
fullWidth
helperText={touched.password && errors.password}
label="Password"
margin="normal"
name="password"
onBlur={handleBlur}
onChange={handleChange}
type={passwordVisible ? 'text' : 'password'}
value={values.password}
variant="outlined"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
className="focus:outline-none"
aria-label="toggle password visible"
onClick={togglePasswordVisibility}
edge="end">
{passwordVisible ? <Visibility/> : <VisibilityOff/>}
</IconButton>
</InputAdornment>
)
}}
/>
{errors.submit && (
<Box mt={3}>
<FormHelperText error>
{errors.submit}
</FormHelperText>
</Box>
)}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
disabled={(Object.keys(touched).length === 0 && touched.constructor === Object) || isSubmitting}
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link component={NavLink} to="/forgot-password" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link component={NavLink} to="/create-account" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</Form>
)}
</Formik>
</div>
</CardContent>
</AuthPage>
)
}
export default Login
the firebase function in handled in the onSubmit fuction. It sends the token to endpoint in the server.
const express = require('express')
const router = express.Router()
//import middleware
const {authCheck} = require("../middleware/auth")
//import controllers
const {createOrUpdateUser} = require("../controllers/auth")
//route
router.post('/create-or-update-user', authCheck, createOrUpdateUser)
module.exports = router;
i am using the authcheck middleware to verify the token.
const admin = require('../firebase');
exports.authCheck = async (req, res, next) => {
console.log(req.headers.authtoken); //token
try {
const firebaseUser = await admin.auth().verifyIdToken(req.headers.authtoken);
console.log('FIREBASE USER IN AUTHCHECK', firebaseUser)
req.user = firebaseUser;
next();
} catch (err) {
console.log(err)
// res.status(401).json({
// err: "Invalid or expired token",
// });
}
};
however this returns a 401 token expired. i know the token is being sent because it is logged in the console. Im at a loss. i dont see any other way to write the code.

Answer 1

I found the answer here on stack overflow. A simple time sync on the machine i am working on did the trick.
Error: Firebase ID token has expired