This site can’t be reachedCheck if there is a typo in undefined-- Please help!

[loladekasumu]

I’m trying to implement auth0 into my program.
This is my index.js file , I couldn’t add the code here. So I created an index2.js file for the code.

This is index2.js

So I successfully implemented the code here, have my two log in/logout buttons and instead of having the code in app.js . I made a signinpage.

My domain and client ID are correct but when I click the button I get this URL : https://undefined/authorize?scope=openid%20profile%20email&response_type=code&response_mode=query&state=OV82SjdyTkRkT2h2QVdhNFdRRjZUQ284QzBiWm4yNG9ra2lkMnJ6SmFUbg%3D%3D&nonce=T2tCb0dycVBNNWhkQjVofnFPSk01SFc0LUVvQkpCZXdVbFBIYmg3aFFOeQ%3D%3D&code_challenge=am9ScGiU0dg7Q833eXqQR3uLh1usfh59E7y_xqKiRwI&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtcmVhY3QiLCJ2ZXJzaW9uIjoiMS4xMi4wIn0%3D
and it says This site can’t be reached

Check if there is a typo in undefined.

DNS_PROBE_FINISHED_NXDOMAIN

and in the console it says: crbug/1173575, non-JS module files deprecated.

[oscar.gch]

Alright, so here´s what I found after trying for like 4 hours:

1. There is still no Complete Guide to implement Auth0 using React 18 and React-Router V6.

2. React-Router V6 does NOT allow you to have things setup the way the current guide has it:

    <Switch>
      <ProtectedRoute path="/Profile" component={Profile} />
      <ProtectedRoute path="/ListView" component={ListView} />
    </Switch>
   

Because you have to change to and you cannot use in the with React Router V6.

So… this all boils down to the fact that the file protected-route.js inside the auth folder… in the client side… has code that wants things to be in a way(ProtectedRoute) that React Router V6 does not allow.

Solution 1: Use older dependencies versions
These work:
“dependencies”: {
“@auth0/auth0-react”: “^1.11.0”,
“axios”: “^1.1.2”,
“react”: “^16.14.0”,
“react-dom”: “^16.14.0”,
“react-router-dom”: “^5.2.0”,
“react-scripts”: “4.0.0”

Solution 2: Implement code that makes it work that you create on your own.

Solution 3: Wait for an Auth0 guide that is fully compatible with React 18 and React Router V6.

I’ve decided to go for solution 1 for the moment, and then… when there is a new guide… I will attempt to migrate. I don’t want to code it on my own because I will probably make a frankenstein solution with a bunch of hacks that will later come back to bite me in the butt when the guide comes out.

[oscar.gch]

Oh, and this part:

crbug/1173575, non-JS module files deprecated.

Has nothing to do with it. That’s something to do with the react scripts but it’s not related to your issue as far as I can tell.

[oscar.gch]

This is the guide I’m refering to, follow it using the dependencies above and it should work. But the downside is you won’t have React 18 hahaha nor React Router V6

The Complete Guide to React User Authentication with Auth0

[dawid.matuszczyk]

Hi team!

We are updating old posts with possible solutions. In the meantime, our team has prepared the documents regarding React v18+ and Router v6.

You can find the docs here React Authentication By Example: Using React Router 6

Thanks
Dawid