Using API in react to update/delete/create/get users?

Help
,
1

I am trying to use react with auth0 and finally got stuff working and wanted to update a user. First thing I noticed was that I do not have a user_id on my profile. I have a sub field, but I am not sure if that is an actual id or not.

Second issue is that I keep getting: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
I have put http://localhost:3000 inside of the ACAO stuff in the Auth0 settings and even with axios tried to allow it, but it still isn’t working. I am not sure if this is due to using the wrong user_id

2

First things first, did you follow the React quickstart? What version of Lock are you using? Secondly, do you have your CORS URLs defined in the Dashboard?

3

Yes, 11.5.1, and CORS URLs are defined in my dashboard.

5

CORS or Allowed Web Origins?

6

:wave: @tbaustin

Are you making the call directly from your react app? If you’re trying to use the /oauth/token endpoint directly from the browser it will not respond with CORS headers. As to avoid the endpoint being used on the browser, we recommend you use cross origin authentication instead of POST /oauth/token. Please let me know if this is the case for you, if not if you could provide the code you are using.

7

I made a stack overflow with some code that relates to this CORS problem I am having: auth0 - AXIOS: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource - Stack Overflow

8

I am using react and have ran into a problem that I was having early but fixed. I got this working without any errors or CORS erros:

getProfile()
      .then(profile => {
        user = profile;
        return generateToken();
      })
      .then(token => {
        this.setState({
          token
        });
        const headers = { Authorization: `Bearer ${token}` };
        return axios.get(`https://taustin.auth0.com/api/v2/users/${user.sub}`, {
          headers
        });
      })
      .then(res => {
        this.setState({
          profile: res.data
        });
      })
      .catch(err => {
        this.setState({
          err: err.message
        });
      });

Yet when I make a patch request to the same api/v2/users/{id} :

 axios
      .patch(
        `https://taustin.auth0.com/api/vs/users/${this.state.profile.user_id}`,
        { user_metadata: this.state.items },
        headers
      )

I get a CORS error like so:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
13

We are currently looking into this and will get back with you soon after we test possible solutions to suggest

15

I want to check does the get request work, but not the patch request?

Also, I made a comment on StackOverflow to check the URL for the patch (‘…/api/v2/…’).

16

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

18

Issue has been solved! The header was being passed incorrectly, {headers}, when making the patch and the URL needed to be fixed ../api/v2/users/..

2 Likes