Search code examples
javascriptreactjstypescriptfirebase-authentication

React TypeScript/Firebase -Property '_tokenResponse' does not exist on type 'UserCredential'


I am new at typescript and i am trying to convert my react project to typescript. I am creating a user through firebase but it gives me this error Property '_tokenResponse' does not exist on type 'UserCredential'. How do i solve this?

createUserWithEmailAndPassword(auth,values.email,values.password)
                       .then((userCredential) => {
                        console.log(userCredential);
                        setSubmitting(false);
                        authContext.logIn(userCredential._tokenResponse.idToken);
                        navigate('/');
                      }).catch((err)=>{
                        setError(err.message);
                      })

The entire code for authContext

import React, {useState} from 'react';

const AuthContext=React.createContext({
    token:'',
    isLoggedIn:false,
    logIn:(token:string)=>{},
    logOut:()=>{},
});

export const AuthContextProvider:React.FC=(props)=>{
    const initialToken=localStorage.getItem('token')??'';
    const [token,setToken]=useState(initialToken);

    const userIsLoggedIn=!!token;
    //console.log(userIsLoggedIn);

    const loginHandler=(token:string)=>{
       // console.log(token);
        setToken(token);
        localStorage.setItem('token',token);
    }

    const logoutHandler=()=>{
        setToken('');
        localStorage.removeItem('token');
    }

    const contextValue={
        token:token,
        isLoggedIn:userIsLoggedIn,
        logIn:loginHandler,
        logOut:logoutHandler
    };

    return(
        <AuthContext.Provider value={contextValue}>
            {props.children}
        </AuthContext.Provider>
    )
}

export const useAuth=()=>{
    const context = React.useContext(AuthContext)
    if (context === undefined) {
      throw new Error('useAuth must be used within a AuthContextProvider')
    }
    return context
  }

export default AuthContext;```

Solution

  • When using Firebase JavaScript SDK, you don't need to handle tokens by yourself, they are handled under the hood by the SDK itself.

    As you can read here

    https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#createuserwithemailand

    On successful creation of the user account, this user will also be signed in to your application

    To keep your user logged in when you close the page, check the persistence section here

    https://firebase.google.com/docs/auth/web/auth-state-persistence#modifying_the_auth_state_persistence

    and also here

    https://firebase.google.com/docs/auth/web/auth-state-persistence#supported_types_of_auth_state_persistence

    So basically, just don't try to read the token, that is supposed to be protected.