Currently, I have integrated Auth0 authentication into my NextJS application by following their documentation. Now, I am in the process of calling an external ExpressJS application using the guidelines provided here: https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md#access-an-external-api-from-an-api-route.
The setup involves running NextJS on port 3000 and Express on port 3001. My Express server configuration is as follows:
const jwtCheck = expressjwt({
secret: jwksRsa.expressJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: process.env.AUTH0_JWKS_URI as string,
}) as GetVerificationKey,
audience: process.env.AUTH0_AUDIENCE as string,
issuer: process.env.AUTH0_ISSUER as string,
algorithms: ['RS256'],
})
app.use(jwtCheck)
While attempting to make an unauthenticated request from my NextJS app to the external API, I receive the
UnauthorizedError: No authorization token was found errorapp.use(jwtCheck), the requests are successful since there is no authentication check.
Here's how I have configured my NextJS application:
// [...auth0].ts
import { handleAuth, handleLogin } from '@auth0/nextjs-auth0'
export default handleAuth({
login: handleLogin({
authorizationParams: {
audience: process.env.AUTH0_AUDIENCE,
scope: 'openid profile email read:trips',
},
}),
})
// /api/trips.ts
import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0'
const apiURL = process.env.NEXT_PUBLIC_SERVER_URL
export default withApiAuthRequired(async function trips(req, res) {
const { accessToken } = await getAccessToken(req, res, {
scopes: ['read:trips'],
})
const response = await fetch(`${apiURL}/trips`, {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
Accept: 'application/json',
Authorization: `Bearer ${accessToken}`,
},
})
const trips = await response.json()
res.status(200).json(trips)
})
// /pages/trips/index.tsx
const TripsPage = (props: InferGetServerSidePropsType<typeof getServerSideProps>) => {
if (!props.user) return <div>User error!</div>
return (
<div>
// components that use the fetched data
</div>
)
}
export const getServerSideProps = withPageAuthRequired({
async getServerSideProps() {
const { data } = await axios.get('/api/trips')
try {
return {
props: {
data: data,
},
}
} catch (e) {
return {
notFound: true,
}
}
},
})
export default TripsPage
However, when trying to access the http://localhost:3000/trips page after logging in, I encounter an error:
GET http://localhost:3000/trips 500 (Internal Server Error)
Uncaught Error: connect ECONNREFUSED ::1:80
at <unknown> (Error: connect ECONNREFUSED ::1:80)
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1487:16)
It appears that the request does not leave my NextJS application's domain. The internal API call seems to be failing. However, when directly accessing http://localhost:3000/api/trips, I do receive a response with JSON data and the logged access token indicates proper authentication. So, the issue lies with the actual page calling the NextJS proxy API, which communicates with my ExpressJS API.
The complete error log in the NextJS console can be viewed here:
https://i.sstatic.net/TT9gy.png
error - AxiosError: connect ECONNREFUSED ::1:80
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1487:16) {
port: 80,
address: '::1',
.....
Any insights on what might be causing this issue?