React Sample APP login

Get Help
1

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

3

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.

1 Like
4

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!

1 Like
5

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!

1 Like
6

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%253Cyour-app-domain%253E%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

Screen Shot 2021-02-03 at 2.28.53 PM
Screen Shot 2021-02-03 at 2.28.53 PM1837×630 69.6 KB

7

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.

8

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””

1 Like
9

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?

10

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

1 Like
11

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!

12

Awesome! Glad to hear it is working now!

1 Like
13

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.