React Native "An error occurred when trying to authenticate with the server"

I’m trying to add a Patreon login to my React Native app and I have it almost working – I set up a custom social connection using this post and installed the Auth0 react native library, so far so good.

When I call authorize({}, {}) I get the vague error “An error occurred when trying to authenticate with the server.” although it seems like the OAuth works, I get redirected to the Auth0 page, click the button to go to Patreon, then on Patreon click Allow to grant access. But when I get redirected back to my app user is null and I have the aforementioned error message.

My code’s pretty straightforward:

const Patreon = (props) => {
    const {authorize, clearSession, user, getCredentials, error, isLoading} = useAuth0();

    const login = async () => {
        try  {
            await authorize({}, {});
            const credentials = await getCredentials();
            // console.warn(credentials);
        } catch (e) {
            console.warn(e);
        }
    }

    const logout = async () => {
        try {
            await clearSession();
        } catch (e) {
            console.log(e);
        }
    }

    console.warn(error);

    return <View>
        <Button title="Patreon Login" onPress={login} />
        <Button title="Logout" onPress={logout} />
    </View>
}

Package wise I have

  • react-native: 0.72.3
  • react-native-auth0: 3.0.1

Is there any way to get more logging out of the login process? Everything seems to be set up correctly so I have no idea what this error means.

qq to start @taboobat, is your Patreon Social Connection working outside of your react-native app, e.g., if you test the connection, etc?

1 Like

Yes it is, when I test the connection on the Auth0 dashboard I get the “It works!” screen with an example payload that the app should receive (if it wasn’t currently erroring in app).

Here’s a redacted screenshot of what I get when I go through “Try Connection”

Is there any logging I can enable anywhere? The error message “An error occurred when trying to authenticate with the server.” doesn’t appear in the React Native lib’s codebase (GitHub - auth0/react-native-auth0: React Native toolkit for Auth0 API) so I don’t know how to even tell which server it’s trying to contact.

Logging: yes first part is already there under MonitoringLogs in your Manage dashboard. Check for both s (Success Login) and seacft (Success Exchange) type entries there.

Any Rules or Actions enabled in your flow?

1 Like

Firstly (and a bit late) thank you for your help! In case it’s not clear I’m very very new to Auth0, I hadn’t heard of it before this weekend. My only goal is get an access token from Patreon in order to check for active subscriptions, etc, so that’s all I’ve set up. Brand new account, created the custom Social Connection for Patreon from the post in the OP, and created a single application that uses that connection. No rules, no actions, no other connections.

Thanks for pointing me to the logs page, with that I can see the success when I use the test on the Auth0 dashboard and an error when I try to connect in the app (progress!). The error is a failed exchange with the error “Unauthorized”, and there’s also a Success Login log generated:

In the details of the error it has (some redactions):

  "date": "2023-09-11T21:58:08.186Z",
  "type": "feacft",
  "description": "Unauthorized",
  "connection_id": "",
  "client_id": "<my id copied from the application dashboard>",
  "client_name": null,
  "ip": "96.235.24.53",
  "user_agent": "okhttp 4.10.0 / Other 0.0.0",
  "details": {
    "code": "******************************************u0R"
  },
  "hostname": "dev-<redacted, but correct>.us.auth0.com",
  "user_id": "",
  "user_name": "",
  "auth0_client": {
    "name": "Auth0.Android",
    "env": {
      "android": "30"
    },
    "version": "2.10.0"
  },
  "log_id": "90020230911215809051061000000000000001223372040005784503",
  "_id": "90020230911215809051061000000000000001223372040005784503",
  "isMobile": false,
  "id": "90020230911215809051061000000000000001223372040005784503"
}

So this looks to me like it’s an error communicating with the Auth0 server, though I’m not sure why – I did just now double check my tenant and client id that get passed into the library. I don’t think those could be wrong because like I said in the OP the OAuth almost works, when I click login I get to the Auth0 page at my tenant with the login with Patreon button (and it has my tenant and app name on that page so those are getting read correctly), when I click that it takes me to Patreon where I click Allow, and then it drops me back in my app with the error.

It must be something with the redirect from Patreon back to the Auth0 servers? I’m glad there’s a concrete error but I’m not sure how to dig deeper.

Thanks, got your tenant from the log_id and took a look. We’ll try to dig something else up internally here and come back to you soon.

OK, so the Failed Login was my test call on your Application settings in Auth0 Server. You can ignore it.

Right now you have Application Type Credential settings that are breaking your token flow. From another thread:

And you’ve also helped us find a UI bug that might confuse the issue further. Here’s how to turn these off in order to restore… uh… order.

First, in your Application ➔ Settings in Manage, if you do NOT have the Credentials tab visible, then scroll to the Application Type and change it to Regular Web Application. The following Note: dialog will appear beneath . You can click View Credentials there OR scroll up and the Credentials tab will now be visible.

Screenshot 2023-09-11 at 4.55.18 PM

Ok.

Second, in the Credentials settings there, you’ll find your Authentication Methods is set to Client Secret (Post). Change this by setting it back to the default of None.

Screenshot 2023-09-11 at 5.00.44 PM

Lastly, you can return to Application ➔ Settings tab and return the Application Type back to Native, and you should be good to go.

LMK how you get on. We’ll address the settings bug that allows Credentials changes like Client Secret (Post) to accidentially remain hidden and on in the background.

1 Like

That did it, thank you! I’m getting the access token now and should be good to work on my integration!

I’m curious, is this something that I accidentally did, or is it a default value that got set? I don’t recall ever changing my app type to web (I’m pretty sure I made it Native from the start) or messing with credentials settings, although it’s definitely possible that I did something while I was trying to figure it out initially.

1 Like

Actually I seem to be running into another issue which may be just me not being familiar with how Auth0 works, or possibly I’m doing something wrong with the Patreon API.

Still with the same code as in the OP, I’m now getting a user back and I’m getting some credentials from the call to getCredentials, but I’m not sure if the credentials are correct or not.

The credentials object is of the shape

{
    "accessToken": "<jwt>",
    "expiresAt": 1694574871,
    "idToken": "<jwt>",
    "refreshToken": null,
    "scope": "openid profile email",
    "tokenType": "Bearer"
}

But I can’t seem to use the tokens, when I try to hit the Patreon API with the token from accessToken is says that I’m unauthorized because my token is wrong and I’m quite sure that I’m attaching the token correctly:

        try {
            const response = await fetch('https://www.patreon.com/api/oauth2/v2/identity', {
                method: 'GET',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                }
            });
            const data = await response.json();
            console.warn(data);
        } catch (e) {
            console.warn(e);
        }

The thing that’s confusing to me is that the Patreon docs say that I should get tokens back in an object like

{
    "access_token": <single use token>,
    "refresh_token": <single use token>,
    "expires_in": <token lifetime duration>,
    "scope": <token scopes>,
    "token_type": "Bearer"
}

which doesn’t match up with the fields that I’m getting back – I’m getting camelCase instead of snake_case which overall is fine, but I’m not getting a refresh token at all which seems odd, and not great since I’ll want to be able to refresh my tokens. I’m also getting an expire time for my accessToken of 24 hours, and their docs say that it should be for a month.

I tried to decode the accessToken to check its contents and it seems that it has an empty payload – there’s a part that looks like jb20vIn0..6Dq and I think there should be a payload of some kind in between those ..

Are these the right tokens forwarded from Patreon, or are these separate tokens issued by Auth0? I’m just kind of confused.

These settings are normally not available by default when one creates a Native application, but will be available and set this way if creating a Regular Web app type. Easily changed though, aside from said UX bug :confused:

Yes, you’ve been issued a token from Auth0 to authenticate your user into your application and if I understand correctly you may be trying the Patreon API with that, however calling their API requires authentication with them. This doc may help: Call an Identity Provider API

1 Like

I might be wrong btw, but hopefully that doc will set you right.

I think you’re right, I need to go through those steps to get an access token for Patreon itself. I was poking around with that a bit and ran into more errors but I’ll see if I can figure those out from other docs and posts. And even if I can’t we’ll have strayed pretty far from the original question of this post so if needed I’ll make a new one. Thanks for all your help!