Reference

JWT, session, OAuth

Next.js version

"next": "13.2.4”

How Membership Works

For example, let’s say you want to make posts only visible to logged-in users.

Then you need a membership feature, and how do you create it?

Registering a user :

1. save user’s ID/password in DB when user signs up

Login :

1. the user sends the ID/password to the server when logging in

2. the server issues an admission ticket if the ID/password in the DB and the ID/password sent by the user match.

Server features that require login :

1. user requests data by GET/POST to the server and presents the ticket as well.

2. the server sends data or page after checking the ticket

That’s it for the membership feature.

Now, let’s see how to create a ticket.

What is a ticket?

An admission ticket is just a simple text document with user information.

When a user logs in, the server generates a text that says “Who is this person and when did they log in” and sends it to the user to use.

and sends it to the user to use, that’s the ticket.

To check the ticket

You can use your browser’s cookie store.

That’s not a metaphor, if you turn on Chrome DevTools, there’s actually a Cookie on the Application tab.

Cookies stored in the cookie store are automatically sent along with GET/POST requests to the server.

So the server is forced to store the ticket in the user’s browser’s cookies.

(The server has that right)

So anyway, we can create a ticket at login and put it in the user’s browser cookie.

There are two main ways to create a ticket, session and token, and you can choose 1

session method

If you use the session method

Login :

1. when the user logs in, record { user’s ID, login date, expiration date, session id } in the DB.

2. when issuing a ticket to the user, write only one session id on the ticket.

Server functions that require login :

1. the user submits the ticket to the server with a GET/POST request

2. the server searches the DB with the session id written on the ticket, and if there is nothing wrong in the DB record.

If there is nothing wrong with the DB record, the server will proceed with the GET/POST request.

The advantage is that the DB is checked for each GET/POST request.

you can check the user strictly for each request.

The downside is that it can put a lot of pressure on the DB.

For this reason, sites with a large number of users often use a slightly faster DB like Redis.

Token method

For the most part, we’ll just call it JWT and refer to it as JWT. Short for JSON Web Token.

If you use the JWT method

Login:

1. when the user logs in

When we issue a ticket to the user, we write { user’s ID, login date, expiration date } on the ticket and send it encrypted.

Nothing is stored in the DB.

Server functions that require login :

1. when the user makes a GET/POST request

When the user submits the ticket, { user’s ID, login date, expiration date } is written.

If there is nothing wrong with that, it will pass.

Q. What if the user forges the JWT freely?

But when I create a JWT, I convert various information into short characters.

When converting, you can put a password, so if the password is changed or the contents are changed, the short character will also change.

so you can easily tell if it’s fake or not, so you don’t have to worry about it.

The advantage of JWT is that you don’t have to look up the DB every time you make a GET/POST request, so the DB burden is low.

Therefore, sites with a large number of users tend to use it.

The downside is that if someone steals your JWT, there’s no way to prevent them from logging in.

It can also be difficult to log out of another computer because you can’t destroy a JWT stored on another computer.

Of course, you could collect the bad JWTs and log them in a database or something.

But then you’d have to query the DB every time you used a JWT, which isn’t really any different from the session method.

Anyway, session and JWT have their own advantages and disadvantages, so let’s choose one.

OAuth

OAuth is not a ticket, but one of the login methods.

OAuth means

A user’s permissions on site A

I’m running site B, and I can borrow it for a while, and it’s like a rule that defines the process.

So if you use OAuth well, you can get the user’s A site membership information and use it to sign up for B site.

This is often referred to as social login.

Next-Auth (Auth.js) library

This is a library that makes it very easy to create a membership function using JWT or OAuth.

Just install the library, copy and paste the code, and you’re done.

You can implement both social login and username/password login.

You can also implement JWT and session methods.

With the DB adapter feature, you can save sessions in the DB and manage users.