CODEWITHSUNDEEP
reactjstypescriptauth0
Steve Ferguson
Steve Ferguson

Reputation: 802

Setting up React app using Typescript with Auth0

I'm attempting to work through the Auth0 sample application using a project created using create-react-app with the Typescript template.

I found one example that got me through react-auth0-spa.tsx (https://github.com/auth0/auth0-spa-js/issues/39). However, when I try to create NavBar.tsx, it seems not to be understanding the type returned by the useAuth0() call. I am a comparative lightweight with Typescript, but this seems like it may be because the type is declared as nullable, though that's a guess.

Here's the export from react-auth0-spa.tsx:

auth0 export

And here's the error VSCode is showing me:

auth0 import error

But isAuthenticated is very definitely on the interface, which leads me to think the nullable declaration is part of my problem:

Auth0Context interface

If I change the type declaration to 'any' it works, but that's clearly the wrong answer. The whole point of using Typescript is for static typing.

I also found https://github.com/tommedema/startup-boilerplate/blob/master/packages/react-app/src/components/LoginView.tsx, which seems to imply that this should work. I've reviewed tsconfig.json and some other files to see if maybe I have different compiler options, but haven't found a smoking gun.

What am I missing here?

Thanks in advance.

Upvotes: 1

Views: 1155

Answers (1)

Steve Ferguson
Steve Ferguson

Reputation: 802

It looks like my suspicion was right. I was missing a trailing non-null assertion operator on the call to create the useAuth0 lambda.

What was this:

export const useAuth0 = () => useContext(Auth0Context);

Needed to be this:

export const useAuth0 = () => useContext(Auth0Context)!;

Upvotes: 2

Related Questions