How to access secured API from Ionic?

Help
, ,
1

We are currently fighting with accessing our secured API from our Ionic/Cordova Application.

We set up the app according to https://auth0.com/docs/quickstart/native/ionic2 and the backend according to Auth0 ASP.NET Web API (OWIN) SDK Quickstarts: Authorization we can now login on the application and test our secured endpoint via postman succesfully.

But when trying to access the secured endpoint from the application using our access token. It always fails. We send the access token as part of the HTTP header like this:

headers.append('Authorization', `Bearer ${this.authService.accessToken}`);

I noticed that opposed to the access token we get for our backend when checking via Dashboard->Apis->Test the access token we get in our Cordova application does not seem to be a valid JWT token.

2

Given you mention that you’re receiving an access token in your Cordova application that is not a valid JWT then the likely cause is that you did not correctly configured the Cordova application to request an access token valid for your own API.

The quickstart you mention for Ionic 2 is only about user authentication, that is, you get an ID token with information about the user who logged in and an access token valid to call the user information endpoint as specified in OpenID Connect. Given this endpoint is under the Auth0 control the access token issued does not need to be a JWT and can be an opaque token.

If you want to authenticate the user and also receive an access token valid for your own API then, in general, you need to pass the audience parameter when doing the initial request. The audience parameter must include the API identifier of your own API; after having done this you should then receive a JWT access token that your own API can validate.

From a quick look at the Ionic2 quickstart you should be able to accomplish the above by adding the audience parameter to the auth0Config variable:

const auth0Config = {
  // other properties...
  // +
  audience: "[your_api_audience_here]",
};
3

So I have the same problem, the returned token is only 16 characters long.
I tried your suggestion @jmangelo but I think the auth0-cordova component will need some changes (auth0-cordova/index.js at master · auth0/auth0-cordova · GitHub).

I’d assume someone has already done this?

I’ll try and make the changes tomorrow.

Thanks

Pete

4

If you are following the quick-start guide like I did, go to auth-service.ts:

Find this:

  const options = { scope: 'openid profile offline_access' };

Replace with (obviously put your API Identifier in here):

 const options = {
      scope: 'openid profile offline_access',
      audience: "https://xxxxxxx.eu.auth0.com/api/v2/"
    };
1 Like
5

Thanks everyone! Those 2 tipps together finally solveed my problem

6

So I have the same problem, the returned token is only 16 characters long.
I tried your suggestion @jmangelo but I think the auth0-cordova component will need some changes (auth0-cordova/index.js at master · auth0/auth0-cordova · GitHub).

I’d assume someone has already done this? I’ll try and make the changes tomorrow.

7

Thanks everyone! Those 2 tipps together finally solveed my problem

8

This worked for me; many thanks.