TypeError: Cannot read properties of undefined (reading 'signedIn')

[bk973]

I created a component that wraps around my routes to provide authentication. But instead of navigating the signed in User to Dashboard Route, I get the above mentioned error.

Am using useSignInCheck hook

I need some help please. am new to this Library. Thanks

[jhuleatt]

@bk973 can you please share some minimal code that reproduces this issue?

My guess is that you may not be checking the loading state (the docs show this) and therefore trying to check the value of signedIn before it is ready, but seeing your code is the only way to really tell.

[bk973]

Thanks so much @jhuleatt

I realised am that the problem could be coming from google cloudshell. Am using google cloudshell and when I use their development server to test the app, I get the above mentioned error. The browser console shows something about CORS.

In my custom written authentication wrapper, this is how I destructured...

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import {SIGNIN_PATH, DASHBOARD_PATH } from '../constants/paths';
import { useSigninCheck } from 'reactfire';

/**
 * Checks if authentication is valid: If authentication is true, the children elements are rendered. 
 * Or else the user is redirected to sigin path.
 * @param {*} children - JSX child element(s) that will be rendered if condition passes
 * @param { Object } rest - Props and other stuff
 */
export const ProtectedRoute = ({ children, ...rest }) => {
    const { status, data: { signedIn } } = useSigninCheck(); 

    console.log(signInCheckResult)
    return (
        <Route
            {...rest}
            render={
                () => {
                    return signedIn? children : <Redirect to={SIGNIN_PATH}/>
                }
            }
        />
    )
}

[jhuleatt]

I believe the issue is actually on line 14 in that error message:

const {status, data: {signedIn }} = useSigninCheck()

While status is loading, data is undefined. So trying to access data.signedIn in your destructuring assignment will fail.

Try this instead:

function Home() {
  const { status, data: signInCheckResult } = useSigninCheck();

  if (status === "loading") {
    return <span>loading...</span>;
  }

  if (signInCheckResult?.signedIn === true) {
    console.log("signed in!");
  } else {
    console.log("not signed in.");
  }
}

[bk973]

Thank you so much @jhuleatt for your help.

I followed your advice and it worked for me( Issue #462 is gone ). But the only problem is that Firebase seems to be blocking requests from Google cloud shell due to CORS. Do you have any ideas on how I can fix this issue.

[jhuleatt]

My guess would be that you need to add the domain for your cloud shell-hosted app to the list of Authorized Domains in the Firebase console:

Since this isn't a ReactFire-specific problem, I'm going to close out this issue. I'd suggest posting a detailed question with a minimum reproducible example to Stack Overflow.

[bk973]

Thank you so much @jhuleatt that was so helpful