Why do I need API settings on Auth0 side?

Can you explain me, one thing, please.
I’ve watched that video - React and Auth0 Crash Course and Workshop - YouTube
Authentication is the part I understand. User allowed or not to visit certain pages. Just yes or not, without any options. After user authenticated I get access_token which is a kind of pass to get sensitive data from backend, in another words, API. Backend = API. In my case backend (API) made using php (Laravel).What I do. I pass access_token to backend, there I have middleware for all requests to API, there I check if access_token valid and not outdated (using Auth0 php library), then I check permissions which are added to access_token. And if user has permission for requested route, php backend returns data.

Why do I need API section in Auth0 settings?
I just need settings for users (roles, permissions) and permissions inside access_token.
What is the purpose of API settings? API is not on Auth0 side, why should I do some requests to some API on Auth0 side?

Hi @alt1

If an app calls 3 different APIs, it needs 3 different access tokens. Each API is identified by an audience, and that audience string is configured in the API settings of Auth0.

John

1 Like

Hi @alt1,

When a user logs in, they are issued an ID Token and Access Token. The Access Token is provided for the audience specified in the client (your application).

When you register your API with Auth0, you are able to configure several things such as:

  • How long an access token should be valid
  • API permissions
  • Whether to support refresh tokens
  • Whether to show user consent
  • More

In order to control these settings, you can register your API with Auth0.

1 Like

Thanks to everybody for answers, but it didn’t become clearer, let move step by step. )

I’ve read really much of docs, but still don’t understand conception standing behind Auth0 API service. Really need your kind help. ) Questions are marked bold.

Let’s go.

1. For authentication I will use React SDK. I wrap the whole my app in Auth0Provider

ReactDOM.render(
     `<Router>`
    `<Auth0Provider>`
      `<App />`
    `</Auth0Provider>`
  `</Router>`,
  `document.getElementById("root")`
);

App.js:

import React from "react";
import { withAuth0 } from "@auth0/auth0-react";

class App extends React.Component {

    render(){
        const { isAuthenticated } = this.props.auth0;
        return '...';
    }

}

export default withAuth0(App);

Now I can create HOC with withAuthenticationRequired() inside - this I will use for protecting routes (<ProtectedRoute/>). For UI elements (menu links, some sections, etc) I will create another HOC, name it <isAuthorized/> and will use it. And that’s it. Very simple.

As you said, after authentication (using React SDK) I get access_token and id_token.

Access_token I should only use for API requests, I shouldn’t decode it and somehow use on client side - only API requests. Id_token - from the box I get basic profile information.

So, in example above I don’t need access_token at all, I forget about it, I just can use id_token to show something in Profile page.

Everything is correct here?

2. Now I need more precise access control, not just allow/deny. I use rule to add permissions and role to id_token and after that I get those permissions in this.props.auth0.user. And now In each component I need, I just do conditional rendering based on permissions of user which are accessable all over the app via provider.

First things first, I need conditional rendering of ui. For some single components I use HOC again, <Can/>:

class Can extends React.Component {

    render(){

        const { user } = this.props.auth0;
        const needPermission = this.props.needPermission;
        if(user.permissions.includes(needPermission)){
            // render component
        }else {
            // do not render component
        }
    }
 }

For some base components like menu I use json list of that menu:

export const menuJson = [
    {

        name: "...",
        permission: 'perm1',
        baseUrl: "...",
        subs: [
            {
                baseUrl: "...",
                name: "...",
                permission: "perm2",
            },
           
        ],
        //...
    },
]

When I render it from list I use again "if(this.props.auth0.user.permissions.includes(menuPermissionFromList))" and then render or not render it.

a) Is this correct way? Or first I should save user permissions in redux state and then use it. If so, when I should save it to redux store?

b) I have an extra headache. Now I need somehow to synchronize permissions in Auth0 side with those in my app. Let’s say somebody changed name of permission on Auth0 side, but in my menu generator I have old permission name, hence I will never see the menu rendered. How to solve that?

3. And finally, the most interesting. I have API. I’ve set in Auth0 settings adding permissions to access_token. I do request to my API from frontend, add access_token as Bearer in headers.
On server side in PHP I verify access_token, decode it and get permissions from there. I know that I can trust them as soon as token valid while permissions are inside of it.

I have middleware that checks every request. Each server side route has its own identifier (permission). I have one more list of permission’s names on server side. What I do in middleware: I get permissions for that endpoint (route) from permissions list, and check if it exists in user’s permissions from access_token. Yes - server answers to request, no - it gives back an error.

Where and how exactly do I need those scopes, claims, how Auth0 can help me. I suppose that I do much extra job that auth0 can handle instead of me.

And again I need somehow to sync already three lists of permissions names: auth0 side, my server side and my frontend. I guess it not like it should work.

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