Auth0 /oauth/token Unauthorized

Get Help and Help Others
1

This is my first post in this community.

I tried setting up an project following the docs. But I can’t make Auth0 work.

I did the following

yarn rw setup auth auth0

Updated my .env and redwood.toml files accordingly with

    AUTH0_DOMAIN
    AUTH0_CLIENT_ID
    AUTH0_REDIRECT_URI
    AUTH0_AUDIENCE

Created a homepage

import { useAuth } from 'src/auth'

const HomePage = () => {
  const { isAuthenticated, signUp } = useAuth()

  return (
    <>
      {/* MetaTags, h1, paragraphs, etc. */}

      <p>{JSON.stringify({ isAuthenticated })}</p>
      <button onClick={signUp}>sign up</button>
    </>
  )
}

but no matter if I login or signup when it returns to the homepage the user is not authenticated

I get a 401 response at the endpoint with payload

{"error":"access_denied","error_description":"Unauthorized"}

Am I missing something? I followed the exact steps of the docs

2

This is my first post in this community.

Welcome, glad to have you trying out redwood and getting involved in the community! :rocket:

Let me quickly run through our auth0 docs from scratch to confirm if I fall into any errors or if I get the same issue. I’ll report back.

Did you happen to see anything useful in your web or API logs that might have indicated something went wrong? There might be some information in there that can help us narrow down what could have went wrong.

3

Just ran through the docs and it worked okay for me - classic it worked on my machine situation :sweat_smile:

Happy to help further if there is any more information you can provide on the error. Is there anything more you think I can provide to help out? I could provide a repo with my setup but I just ran yarn create redwood-app and then followed the instructions on the docs.

4

I will create a new app from scratch and document all the steps I did

1 Like
5

After completing the following steps I end up with a sign up button in the homepage which when I click I get redirected to auth0 and then when I successfully login it get redirected back to the homepage but I am NOT authenticated.

{"isAuthenticated":false}

Create testapp

yarn create redwood-app testapp

➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-redwood-app@npm:6.6.4, @opentelemetry/api-logs@npm:0.45.1, @opentelemetry/api@npm:1.7.0, and 84 more.
➤ YN0000: └ Completed in 2s 187ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 87 packages were added to the project (+ 12.32 MiB).
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 2s 346ms

------------------------------------------------------------------
                🌲⚡️ Welcome to RedwoodJS! ⚡️🌲
------------------------------------------------------------------
✔ Compatibility checks passed
✔ Creating your Redwood app in testapp based on command line argument
✔ Select your preferred language · JavaScript
✔ Do you want to initialize a git repo? · no / Yes
✔ Enter a commit message · Initial commit
✔ Do you want to run yarn install? · no / Yes
✔ Project files created
✔ Installed node modules
✔ Generated types
✔ Initialized a git repo with commit message "Initial commit"

cd testapp

Setup Auth0

yarn rw setup auth auth0

Create Home page

yarn rw g page Home

Update path for home route to /

HomePage.jsx

import { useAuth } from "src/auth";

const HomePage = () => {
  const { isAuthenticated, signUp } = useAuth()

  return (
    <>
      {/* MetaTags, h1, paragraphs, etc. */}

      <p>{JSON.stringify({ isAuthenticated })}</p>
      <button onClick={signUp}>sign up</button>
    </>
  )
}

export default HomePage

Routes.jsx

import { Router, Route } from '@redwoodjs/router'

import { useAuth } from './auth'

const Routes = () => {
  return (
    <Router useAuth={useAuth}>
      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

redwood.toml [web]

[web]
  title = "Redwood App"
  port = 8910
  apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
  includeEnvironmentVariables = [
    # Add any ENV vars that should be available to the web side to this array
    # See https://redwoodjs.com/docs/environment-variables#web
    "AUTH0_DOMAIN",
    "AUTH0_CLIENT_ID",
    "AUTH0_REDIRECT_URI",
    "AUTH0_AUDIENCE",
  ]

.env

AUTH0_DOMAIN="AUTH0_DOMAIN"
AUTH0_CLIENT_ID="AUTH0_CLIENT_ID"
AUTH0_REDIRECT_URI="http://localhost:8910"
AUTH0_AUDIENCE="AUTH0_AUDIENCE"
6

Thanks again for looking into it.

I haven’t seen anything in the logs.

7

This is the console error I get

image
image1452×322 111 KB

8

@Josh-Walker-GM provided credentials which I tried and then authentication worked.

The only difference was that I was using the EU service of Auth0 while the new credentials I tried were US. Maybe this is a bug on Auth0 side.

For now I use Clerk.

9

I just ran into the same issue and went through all the forums. Looks like a potential Content-Type alignment issue from the request via this thread. Content type wrong when getting an Oauth token - Auth0 Community

My “fix” was to go to the app settings where you find the Clint ID and scroll down to the Application Properties section and change the Application Type to Regular Web Application and then back to Single Page Application. Seems like an Auth0 bug when creating a new application. My app shows no errors in the in console log now and fetching the state just fine.

1 Like