How JWT works in Authorization

What is JWT (JSON Web Token)?

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties, this is the definition of JWT official website.

How JWT works in authorization?

• The user logged in to the app and provides their credentials.

• The app server verifies the user credentials and generate a JWT token.
  

const token = jwt.sign(userInfo, 'secret', {expiresIn: '1h'});

normally, we use axios in login form submit function and when user logged in (with verified info) then it hits '/jwt' URL in backend and we create a token for the user.

• And then we set the token in browser httpOnly cookie in browser.

res.cookie('token', token {
httpOnly: true,
secure: true, 
sameSite: 'none'
})

• On subsequent requests, the browser sends the token in the authorization header of the request.

• The server then verifies the JWT token and authorize the users to access the protected resources if the token is valid. The server verifies the token by decoding the token and verifying the signature using the secret key.

Normally the server verifies the token by a middleware:

const verifyToken = (req, res, next) => {
const token = req?.cookies?.token;
if(!token) return res.status(401).send({message: 'unauthorized'});
jwt.verify(token, 'secret', (err, decoded)=> {
if(err) return res.status(401).send({message: 'unauthorized'});
req.user = decoded;
next();
}
)
}

That's how you can use JWT to authorize user. And yes, there are so
many ways to do it, but I personally prefer this one.
Thanks for reading. If you have any question related to this post, you can do it in the comment section, I will glad if I can help you with this topic.If you find any mistake please also comment it, I l
will also be glad to correct the mistake.

Comments

[Schemetastic (Rodrigo)]

Hello!

Interesting article! What do you think about storing tokens using Service Workers in JS?

Oh, and BTW, you can do code highlighting by placing the name of the language after the initial 3 backticks when opening a code block. e.g. ```js, ```css
And you could make your code more readable by tabulating (or adding spaces to) it. For example:

function myFunction(){
    // function with spaces in the new lines
    let sum = {
        a: 4,
        b: 3
    }
    return (sum.a + sum.b)
}

Welcome to the DEV community! As you keep writing, you'll get better and better.

[tarekibnkhayer]

I don't know about Service Workers in JS, Right Now. But I will definitely explore it. Thanks for sharing it and also, I am very glad that you give me suggestion about code highlighting technique. Thank you very much for your suggestions.

[Schemetastic (Rodrigo)]

Okay, Service workers run in a different thread in the browser, e.g. if you open the browsers console and write a JS code, you have access to the DOM, but you can't access Web Workers and Service Worker scripts, still then I wouldn't recommend those for storing certain sensitive data such as passwords, that's why I was asking you that, but it's fine, I'll send you some helpful link:

• Service Worker API
• Web Workers API
• Go Make Things series about Service workers

Hope this helps, welcome!