React Sample APP login

[dpn.nolan]

trying to setup the sample react app, followed the guide and setup api but when i try to login i get this page saying this:

“Check if there is a typo in %7Btenant-name.us.auth0.com%7D.
DNS_PROBE_FINISHED_NXDOMAIN”

crashing url: “https://%7Btenant-name.us.auth0.com%7D/authorize?audience=%7Bhttps%3A%2F%2Fgithub.com%2Fnoho-glitch%2Fauth0-react-samples%7D&client_id=%CLIENT_ID&redirect_uri=http%3A%2F%2Flocalhost%3A3000&scope=openid%20profile%20email&response_type=code&response_mode=query&state=TVI4Z240a1VmYjR0ZUY4aWpBQXpuWjlfT01TTnFvbkdUYml1WFV%2BTzFCUQ%3D%3D&nonce=OXUydmRVeXRWMnItYjVmQmxDOFdjbVI1SVJBUHNyLXdpTHlIc0F1YXpTRw%3D%3D&code_challenge=LXXpj8yoe-3cqmUHCp7pgX56t3jf9-X3p6bvjRI6xCo&code_challenge_method=S256&auth0Client=CLIENT_ID%3D%3D”

There’s nothing in the console

thanks for your help in advance

[stephanie.chamblee]

Hi @dpn.nolan,

Welcome to the Community!

It looks like curly brackets might be included in the domain name (%7B is { and %7D is })

To help see what is going on, could you send a snippet of your code where the Auth0Provider is rendered? Be sure to remove any sensitive data such as Client IDs or domains.

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    audience={config.audience}
    redirectUri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
    cacheLocation="localstorage"
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

What you may want to do is click the “Log In & Download Sample” option in the Quickstart docs: Auth0 React SDK Quickstarts: Login

When you do this, you can select your SPA application and the configurations within the code will be in place already.

[dpn.nolan]

First off, thank you for your help!

I tried downloading it as you said and instead of using the a cloned github repo and am now seeing a failed get and post in the console and the page is saying invalid state when I try to login/signup with google. But I am at least correctly being redirected to the auth0 login page.

I also just found your expanded “complete” react guide and will be reading through that to get a better understanding of this works.

The auth0provider context wrapper looks to be exactly as your sample btw.

thanks again!

[stephanie.chamblee]

No problem! I’m glad to hear the download helped you make some progress!

Regarding the invalid state issue, if you are still encountering it after following the React guide, could you send me a HAR file as a private message to help me troubleshoot? Thanks!

Generate and Analyze HAR Files

[dpn.nolan]

Okay so I’m going through “The Complete guide to react user authentication” and I’m signing up but my button isn’t updating to “logout.” If I clear my catch I can go through the process again, or if I just click “login” again the page refreshes with this as the URL:

“http://localhost:4040/?error=access_denied&error_description=Invalid%20URI%20"https%3A%2F%2F%2F%3Cyour-app-domain%3E%2Fv1alpha1%2Fgraphql"&state=Ll93SWdpZWprR0dVRzRsa2lEc0FiMjFacmVLYVRfT2dXbThPM3kxQzJ%2BUQ%3D%3D”

So I don’t think that I’m getting authenticated.

Other than this on first loading of the server I’m getting a CORS issue where its asking me to “indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute.”

Do I have a local storage issue? This is happening in incognito as well

[dpn.nolan]

The react dev tools is <Auth0Provider is showing the correct props for ClientID, Domain, and the redirectUri is correct at “https://localhost:4040.”

I can also update isAuthenticated to true and the button updates from “Log In” to “Log Out.”

So I’m thinking there’s something setup wrong in my auth0 application settings.

[stephanie.chamblee]

It looks like in your code you might have <your-app-domain> somewhere. If you replace that with your actual application domain, it should fix it. You can find your app’s domain in the application settings.

“Invalid URI “https:///%3Cyour-app-domain%3E/v1alpha1/graphql””

[dpn.nolan]

Searched the whole codebase for “your-app-domain” to no avail, I’ve even switched and tried the main branch and I’m getting the same result.

Edit** Looks like it may be one of the rules i made for hasura. So I can’t run multiple apps because of the rules?

[stephanie.chamblee]

Hm, just to make sure, do the configs look right in the /src/auth_config.json file?

[dpn.nolan]

Figured it out, it was rule I had made for an app with I’m trying to integrate with Hasura! I deleted it and it works. I’ll have to rewrite it for it to work with multiple apps.

Thank you for your help!

[stephanie.chamblee]

Awesome! Glad to hear it is working now!