Utilizing next.js
and next-auth
for user login authentication with an API. Once the login is successful, a httpOnly cookie named __Secure-next-auth.session-token
is stored in the browser. The following is a sample value (not actual data):
eyJhbGciOiJIUzUxMiJ9.eyJ0b2tlbiI6ImV5SjBlWEFpT2lKS1YxUWlMQ0poYkdjaU9pSlNVekkxTmlKOS5leUpwWVhRaU9qRTJNelkyTXprM... (token continues)
When decoding this jwt, it reveals an object with a property jwt
containing the token from the API.
I have two questions:
- Is this format correct?
- How do I incorporate it into a fetch call for restricted API endpoints?
Currently, my fetch call includes these options:
method: 'GET',
'cors': 'no-cors',
credentials: 'same-origin'
However, I am facing an issue where the response received is:
[Symbol(Response internals)]: {
url: 'https://localhost/countries',
status: 401,
statusText: 'Unauthorized',
headers: Headers { [Symbol(map)]: [Object: null prototype] },
counter: 0
}