Setting state in React context provider with TypeScript, functional components and hooks - reactjs

Question

I'm starting with React and TypeScript at the same time and I across a problem while implementing some basic authentication in my application. I've been using Ryan Chenkie's Orbit App and his course on React security as an example to start from.
Right now I'm stuck with compiler complaining about TS2722 error (Cannot invoke object which is possibly undefined) in SignIn.tsx. My suspicion is that all I have to do is to set proper types on all the data structures and function calls, but how and where to set them, somewhat alludes me. So, here's the code:
App.tsx: Nothing fancy here, just an App wrapped in context provider.
import { AuthContext, authData } from "./AuthContext"
const defAuth:authData = {
userId: 0,
name: '',
token: '',
expiresAt: ''
}
const App = () => {
return (
<AuthContext.Provider value={{ authData:defAuth }}>
<Main />
</AuthContext.Provider>
);
}
AuthContext.tsx: When calling createContext() I tried with various default parameters, the general idea is that I could call authContext.setState() and pass the data to it. I am using Partial prefix so that I don't have to pass the setState() to the Provider element.
export interface authData {
userId: number
name: string
token: string
expiresAt: string
}
interface IAuthContext {
authData: authData,
setState: (authInfo:authData) => void
}
const AuthContext = createContext<Partial<IAuthContext>>(undefined!)
const { Provider } = AuthContext
const AuthProvider: React.FC<{}> = (props) => {
const [authState, setAuthState] = useState<authData>()
const setAuthInfo = (data:authData) => {
console.log('Called setAuthInfo')
setAuthState({
userId: data!.userId,
name: data!.name,
token: data!.token,
expiresAt: data!.expiresAt
})
}
return (
<Provider
value={{
authData: authState,
setState: (authInfo:authData) => setAuthInfo(authInfo)
}} {...props}
/>
)
}
export { AuthContext, AuthProvider }
SignIn.tsx: This is again, just a basic sign in component with a form and an onSubmit handler. This is all working as it should until I add the authContext to it. I included only relevant code.
interface loginType extends Record<string, any>{
email: string,
password: string,
remember: boolean
}
const SignIn = () => {
const authContext = useContext(AuthContext)
const { register, handleSubmit, errors } = useForm<loginType>()
const onSubmit = async (data:loginType) => {
const ret = await apiFetch.post('process_login/', formData )
console.log(ret.data)
console.log('Printing context')
authContext.setState(ret.data)
console.log(authContext)
}
/* ... ... */
}
As mentioned before, compiler complains in SignIn.tsx at authContext.setState(ret.data) telling me that it might be undefined. I tried calling createContext() with various parameters, trying to pass it some defaults which would tell the compiler where that setState() will be defined later on in the runtime. I tried calling setState in a few different ways, but nothing really worked.
This is something that clearly works in plain JSX and I'd really like to find a way to make it work in TSX.

Answer 1

Here's what you need to do:
First in App.tsx, you have to use AuthProvider instead of AuthContext.Provider. This way you get rid of the value property.
<AuthProvider>
<Main />
</AuthProvider>
Then, in AuthContext.tsx there's no need to use Partial prefix when creating context. So, a little tweak to the IAuthContext and then pass some default data when creating context.
interface IAuthContext {
authData: authData | undefined,
setState: (authInfo:authData) => void
}
const AuthContext = createContext<IAuthContext>( {
authData: defaultAuthData,
setState: () => {}
})
Now you can call authContext.setState(), passing data as authData type.