Next.js authentication with existing backend

Szymon Kabelis — Wed, 31 Mar 2021 09:03:00 +0000

Recently I was working on some Next.js project and came to issues regarding the authentication using a built-in Next.js server and the existing backend that holds whole logic and access to a database.

I had a problem with understanding how the next-auth is working and how to properly use the credentials provider, or even if it can be used with an existing backend.

So, shortly, the answer is yes! You can use the credentials provider and make auth working together with an existing backend.

In this post, I will just focus on making auth working between the Next.js server and the existing API. If you need to set up the auth in the Next.js app from scratch, please follow the docs mentioned below.

Basics

Before I proceed to Next.js and auth itself I just want to mention that it would be good if you understand the basics correctly. I've prepared the list of links with useful content:

Next.js:

https://nextjs.org/docs - Next.js docs
https://next-auth.js.org/getting-started/introduction - next-auth docs
https://next-auth.js.org/providers/credentials - next-auth credentials provider description

JWT:

https://youtu.be/7Q17ubqLfaM - quick explanation about the JWT

Credentials provider

Next-auth lib gives various providers to authenticate against but we are interested in the classic one, just with the username and email. In fact, it doesn't care if you are using an existing backend or do all the auth stuff in the Next.js server (but in that case you should think about a different provider).

So, as the docs stand, the first thing you need to do is a setup of provider:

providers: [
  Providers.Credentials({
    name: 'Credentials',
    credentials: {
      username: { label: "Username", type: "text", placeholder: "jsmith" },
      password: {  label: "Password", type: "password" }
    },
    async authorize(credentials) {
      // Here call your API with data passed in the login form
      const token = await loginEndpoint(credentials);

      if (token) {
        return token
      } else {
        return null
      }
    }
  })
]

In authorize() handler you need to make a request to your API to auth the user and if credentials are correct you can return the response (or directly the token).

And now you need to set up the jwt() callback. It can look like that:

const callbacks = {
  async jwt(prevToken, token) {
    // Initial call
    if (token) {
      return {
        accessToken: token,
      };
    }

    // Subsequent calls
    return prevToken;
  }
};

This should work fine. But there is one issue.

Expired token issue

The token you get from your API is not refreshed. So, you can have a situation when auth between the Next.js client and Next.js server works fine but the token you have from your API has expired.

So, to make requests from the client through the Next.js server to your API, you would need to logout and login once again to have a valid token.

Solution

You can't just set the options of session.maxAge to match the one from the API you are using because every time you access the site (assuming you are using next-auth) time of the session is automatically extended.

However, what you can do is, manually set the expired time by hardcoding a value or returning the expired time value from the login/refresh endpoint. See how the code looks in that case:

const refreshAccessToken = async (prevToken) => {
  const token = await refreshEndpoint(prevToken);

  // Do what you want

  return {
    accessToken: token.accessToken,
    accessTokenExpires: Date.now() + token.expiresIn * 1000,
  };
}

const callbacks = {
  async jwt(prevToken, token) {
    // Initial call
    if (token) {
      return {
        accessToken: token.accessToken,
        // Assuming you can get the expired time from the API you are using
        // If not you can set this value manually
        accessTokenExpires: Date.now() + token.expiresIn * 1000,
      };
    }

    // Subsequent calls
    // Check if the expired time set has passed
    if (Date.now() < prevToken.accessTokenExpires) {
      // Return previous token if still valid
      return prevToken;
    }

    // Refresh the token in case time has passed
    return refreshAccessToken(prevToken);
  },
}

As you can see, in the initial call, you need to set the expired time based on what the API returns or just hardcode the value (e.g. 30 * 30 - 1 hour).

Then, whenever the session is checked jwt() callback is called and the current time is compared to expired. If it's passed then you need to call the refreshAccessToken function, in which you can refresh the token using the API, otherwise, the previous token is returned because it still can be used.

With this approach, you can use the Next.js server as a proxy between the client app and the API you are using. This can be very useful due to the power of Next.js API Routes.

If you have any questions, let me know in the comments.

What is CreateJS?

Szymon Kabelis — Mon, 16 Nov 2020 11:24:57 +0000

I bet you have probably never heard about the CreateJS library, if so, this post is for you.

What is CreateJS?

So… let me explain. CreateJS is a suit that consists of 4 JS libraries (can be run together or independently):

– EaselJS – all you need for generating graphics and interact with HTML5 Canvas.
– TweenJS – all you need for tweening things.
– SoundJS – all you need for playing sound.
– PreloadJS – all you need to preload your app assets.

So as you see, pretty much all you need to create a fancy game!

How can you use it?

Unfortunately, the library is written in ES5, so it means you can’t just import and use it in your project. There are some ideas for updating it to ES6 but for now, we can only use the old version.

I’ve created a starter project that lets you quickly check how the library works. Check it out here.

So clone the repository and execute three commands in the following order (make sure you have node & yarn):

– yarn setup – this one will init a fresh repository for a new project
– yarn install – this one will install dependencies
– yarn start and boom! You should see the following page:

Editing the code

Once it’s started, you can edit whatever you want for testing. For example, open the app.js file and try to change the text background color. All you need is to change the HEX color string at line 26. For example to #ff0000:

25    const graphics = new Graphics()
26      .beginFill("#ff0000")
27      .drawRect(CONFIG.canvasWidth / 2, CONFIG.canvasHeight / 2, 380, 100);

Let’s see what happens:

Oops! The text is not really visible now. Try to change the third argument in the Text call on line 32 to #ffffff:

32 const welcomeText = new Text("CreateJS Boilerplate", "26px Courier", "#ffffff");

Conclusion

Even though it is not the newest and fresh library, you should give it a try!
Come back later for more materials about that. Good luck with coding :).

DEV Community: Szymon Kabelis

Next.js authentication with existing backend

Basics

Credentials provider

Expired token issue

Solution

What is CreateJS?

What is CreateJS?

How can you use it?

Editing the code

Conclusion