My React frontend uses Auth0 for user authentication. Once a user is logged in, I retrieve the token using getAccessTokenSilently() and send it to the backend like this:
const { user, isAuthenticated, getAccessTokenSilently } = useAuth0()
useEffect(() => {
if (user) getTickets()
}, [user])
async function getTickets() {
const token = await getAccessTokenSilently()
const response = await fetch('http://localhost:4000/api/gettickets', {
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({ user, bar }),
})
const data = await response.json()
}
After receiving the token in my backend, I attempt to verify it using jsonwebtoken with the following code:
import express from 'express'
import jwt from 'jsonwebtoken'
import dotenv from 'dotenv'
dotenv.config()
const routerGetTickets = express.Router()
routerGetTickets.post('/', async (req, res) => {
const PUBKEY = process.env.PUBKEY
const token = req.headers.authorization?.split(' ')[1]
if (token && PUBKEY) {
jwt.verify(token, PUBKEY, { algorithms: ['RS256'] }, (err, data) => {
console.log('token :>> ', token)
if (err) {
res.sendStatus(403)
console.log('err :>> ', err)
return
} else {
console.log('everything ok')
}
})
}
})
export default routerGetTickets
To use algorithm RS256, I extracted the public key using openssl with the signing certificate downloaded from my application in the Auth0 dashboard.
The error message I encounter is:
err :>> JsonWebTokenError: secretOrPublicKey must be an asymmetric key when using RS256This is my index.ts file:
import React from 'react'
import ReactDOM from 'react-dom/client'
import './sass/index.scss'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
import { Auth0Provider } from '@auth0/auth0-react'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
<React.StrictMode>
<BrowserRouter basename='/tombola'>
<Auth0Provider
domain='*******.uk.auth0.com'
clientId='*****************************'
authorizationParams={{
redirect_uri: `${window.location.origin}/tombola/callback`,
audience: 'https://******.uk.auth0.com/api/v2/',
scope: 'read:current_user update:current_user_metadata'
}}
>
<App />
</Auth0Provider>
</BrowserRouter>
</React.StrictMode>
)