Auth0 Home Blog Docs

How to use auth0 spa with TypeScript?

#1

I’m implementing Auth0 in a React TypeScript site and am trying to get the https://auth0.com/docs/quickstart/spa/react to work.

Specifically, when the react-auth0-wrapper.js is converted to react-auth0-wrapper.tsx I get TS errors on the following lines.

const loginWithPopup = async () => {
const handleRedirectCallback = async () => {

An async function or method in ES5/ES3 requires the Promise constructor. Make sure you have a declaration for the Promise constructor or include ES2015 in your --lib option.

The lib option of tsconfig.json looks like this

"lib": [
  "dom",
  "dom.iterable",
  "esnext"
],

Any thoughts or insights appreciated.

#2

Hi there @treasurer and welcome to the Auth0 Community!

I will dive into this, give it a build, and let you know what I find :+1: Thanks!

#4

Hi @James.Morrison, any update on that front, I’d be interested to use the wrapper in typescript as well.

Thanks

#5

Still investigating on this front, will share details as they emerge.

#6

Also doing the same implementation so I want to follow up with you all here. I’ve gotten my react-auth0-spa.tsx to work but unsure if I’m doing things right.

My lib option of tsconfig.json looks exactly the same but I’m not getting the TS errors:

    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],

When would Auth0 create an official Typescript wrapper?

#8

Any updates James? Still can’t get react-auth0-spa.js to compile in TypeScript. This is preventing us from using Auth0 in our SPA website even though we are an Auth0 customer.

Thanks
Chris

#9

Hi,

Same here :wink:

Thanks

#10

Hi folks,

We should have a blog post coming soon on react + typescript. I don’t have any dates, but hopefully it will provide some insight when it arrives. In the mean time, have you seen this thread on GitHub?

1 Like
#11

There are some possibilities here. However, our site is 100% TypeScript and w/o TS support forAuth0 we can’t proceed. Authentication is critical and our development is pretty much on hold. Is there any way this can be expedited?

#12

@treasurer,

Can you give us more insight on what you would like to see specifically? What is confusing, what part of the stack, what frameworks, etc. I am happy to share your feedback with the relevant parties if you describe your needs. I can’t guarantee any dates on when the content will be live, but I can certainly advocate for you.

Let me know.

Thanks,
Dan

#13

Hi Dan

The problem is the react-auth0-spa.js sample in the React Starter code does not work in TypeScript. If I take the sample code and put it in a .ts file there are a number of TypeScript errors. I’ve tried several approaches to get it to work without success.

It would be really helpful is the React starter code included both JS and TypeScript samples. Without a TS sample we are unable to use Auth0 in our site despite being a customer. Whatever you can do to expedite this would be appreciated.

Thanks
Chris

2 Likes
#14

FYI I am maintaining an example on how to use auth0-spa-js with Typescript at https://github.com/tommedema/startup-boilerplate

More specifically you may be interested in https://github.com/tommedema/startup-boilerplate/blob/master/packages/react-app/src/lib/auth0.tsx

4 Likes
#15

Hello, it is been some time since. Is there any date when we can expect auth0 react typescript?
Thank you, keep up the good work. :+1:
Frank

#16

While I don’t have a ETA on the article being published, I can share with you that it’s a priority and we will share it here as soon as it’s released.

2 Likes
#18

Down a rabbit hole today with this. Preface w/ I’m new to TypeScript and the JS world mostly. Webpack & TypeScript have lead to headaches the past few days.

I’m going for TypeScript, React & a functional approach (via React Hooks). Again, still a newbie, so I may butcher some of the linguistics.

I rewrote the sample code from the Quickstart here.

Here’s how I personally rewrote it. Gist linked here.

I was banging my head against the wall for hours. Everything compiled, things were serving, but for some reason, the createAuth0Client (imported) was undefined . Why? I still do not know. But, I checked out @tommedema’s first link above. More specifically, I checked out the tsconfig.json and saw he had this compilerOption that I was missing "esModuleInterop": true. Added that and all is well :slight_smile:

#19

Hi James! Any chance we will see the article soon? Thank you!

#20

I’m looking forward to it as well @youngrichard but as soon as I catch wind of it’s release I will be sure to share here :slightly_smiling_face:

3 Likes
#22

Hello @tommedema

Thank you for releasing your rewritten code.

On the first try when the app starts the login works but after the refresh of the app an error shows:

Failed to load resource: the server responded with a status of 400 ()

Is there any chance you could help me.

Thank you.

#23

I think this is the awaited blog post - https://auth0.com/blog/modern-full-stack-development-with-nestjs-react-typescript-and-mongodb-part-1/

2 Likes