Encryption and signing of JWT tokens

[Otann]

I would like to say first, that this is the best library I saw for doing authorization for next.js!

I am building a SPA, which is going to fetch its data from a GraphQL backend. In order to secure the calls to my backend service, I was thinking of sending a raw JWT token and validating it there, using the same keys.

I managed to do it, but stumbled upon behavior that surprised me:

1. token is signed first and turned into a base64 string
2. then that string is being encrypted and passed as a token

My backend authorization library expects it to be either one or another.
Of course, I can work around it, but I was wondering, what is the reasoning behind this behavior?

If I can decrypt a token, why do we need to sign it?

Would you be open to a PR, which would change that?

[balazsorban44]

Hi there! Thank you for the praise! ♥

I think the usual (or at least the most common) way of authorizing a request is to add an Authorization header with something like a bearer access token, which you get, if you log into an OAuth provider.

The JWT token we generate is probably not something you want to send, since it is only meant to be used in that single application.

You can hovewer use it to store your access token with the help of the jwt and session callbacks, which makes it possible to access the mentioned access token with useSession in your client side code, or getSession in one of Next.js's data fetching (gS(S)P) methods. Check them out here

Now it depends on how you wish to communicate from your application with GraphQL, but one way is to create a simple fetch wrapper functioning as your GraphQL client (or use something like graphql-request if you don't mind some extra bytes for the comfort of writing less code), and use it together with React Query. (This is just an opinionated example, you might have heard of Apollo Client as well, which is also nice, but can be bundle heavy in simple usecases)

[Otann]

Whoa! Thank you for so many references so much!
It was not what I meant with the question, but I was certainly looking for a good GQL library too. 👌
I will check out React Query, it looks good and quite fitting for my domain.

Regarding token, I am planning something like this

reuse an existing JWT token simply for convenience like this:

And to have something like this as a dummy proxy:

import jwt from 'next-auth/jwt'
import fetch from 'node-fetch'

const graphqlUrl = process.env.GRAPHQL_URL

export default async function handler(req, res) {
  const token = await jwt.getToken({ req, raw: true })
  const options = {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + token,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(req.body),
  }
  const proxied = await fetch(graphqlUrl, options)
  const data = await proxied.text()

  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.end(data)
}

It is the only way I found, where I won't be exposing anything risky.
But maybe I am missing something?

[Otann]

I thought I might've asked the question in a confusing way and with too much context.

I meant quite simple proposal — maybe makes more sense to encrypt token, not signedToken here:

https://github.com/nextauthjs/next-auth/blob/canary/src/lib/jwt.js#L47

[ktnrn]

Hey, i liked your design! You are encrypting the access_token but at the same time, you want to use that to call your APIs.
I am running into the same issue. I am not able to encrypt the JWT. There are no errors but when I get the jwt in the browser's dev tools, I can see the payload on jwt.io. It seems it only signed the content but not encrypted.

I followed the steps mentioned here:
#484 (comment)