Trouble with authorizing my own backend api invalid token error

Help
,
1

I am building a web app that utilizes react as the front end (SPA) and flask as the back end. I have a route in my backend that I am trying to protect with auth0. In order to do this I followed auth0’s backend quick start for python: Auth0 Python API SDK Quickstarts: Add Authorization to a Flask API application. I copied all the necessary code and here is what my main.py and validator.py look like now.

validator.py:

import json
from urllib.request import urlopen

from authlib.oauth2.rfc7523 import JWTBearerTokenValidator
from authlib.jose.rfc7517.jwk import JsonWebKey


class Auth0JWTBearerTokenValidator(JWTBearerTokenValidator):
    def __init__(self, domain, audience):
        issuer = f"https://{domain}/"
        jsonurl = urlopen(f"{issuer}.well-known/jwks.json")
        public_key = JsonWebKey.import_key_set(
            json.loads(jsonurl.read())
        )
        super(Auth0JWTBearerTokenValidator, self).__init__(
            public_key
        )
        self.claims_options = {
            "exp": {"essential": True},
            "aud": {"essential": True, "value": audience},
            "iss": {"essential": True, "value": issuer},
        }

Main.py:

from os import environ as env

from dotenv import load_dotenv, find_dotenv
from authlib.integrations.flask_oauth2 import ResourceProtector
from validator import Auth0JWTBearerTokenValidator

require_auth = ResourceProtector()
validator = Auth0JWTBearerTokenValidator(
    "{my domain}",
    "{my api identifier that I created through auth0}"
)
require_auth.register_token_validator(validator)

@app.route("/create_listing", methods=["POST"])
@require_auth("create:listing")
def create_listing():
    #create listing code here

I also had to update my front end code as well and here are my main.jsx and create_post.jsx

main.jsx: only showing the changed part

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Auth0Provider
      domain={my domain}
      clientId={my client id}
      authorizationParams={{
        redirect_uri: window.location.origin,
        audience: {the identifier for the api I created on auth0},
        scope: "create:listing",
      }}
    >
      <RouterProvider router={router} />
    </Auth0Provider>
  </React.StrictMode >,
)

This part of the code is essentially getting the access token and then sending the form data with the access token in the header.
create_post.jsx:

try {
            const accessToken = await getAccessTokenSilently({
                authorizationParams: {
                    audience: {my api identifier},
                    scope: "create:listing",
                },
            });
            console.log(accessToken)

            const payload = {
                ...data,
                postDate: formattedDate,
                images: fileBase64,
                userSub: user.sub
            };

            const url = "http://127.0.0.1:5000/create_listing"
            const options = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": `Bearer ${accessToken}`,
                },
                body: JSON.stringify(payload)
            }
            const response = await fetch(url, options)
            if (response.status !== 201 && response.status !== 200) {
                const data = await response.json()
                setError('formError', {
                    message: data.message,
                })
            } else {
                document.getElementById('my_modal_2').showModal()
                reset()
                console.log("works")
            }
        }
        catch (e) {
            console.log(e.message);
        }

However, every time when I go to submit, I always get “error”: “invalid_token”. I saw some other posts mention that you need to go to your api and under machine to machine applications you need to update the permissions available for your api. I did add create:listing but it still didn’t fix the issue. If anyone could offer some help, I would very much appreciate it.

Additionally, I also saw another auth0 page on creating a api with auth0 here: Flask/Python API: Authorization Code Sample. The sample code is much longer and convoluted, but when I ran the curl command I did get the message. I’m just kind of confused on which one actually works and obviously if the shorter code works, I would much rather use the shorter code.

Thanks in advance.

3

Running into the same were you ever able to track it down ?

4

I just deleted everything and recopy and pasted and it worked i must of copied something wrong not sure