DEV Community

tarekibnkhayer
tarekibnkhayer

Posted on

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'});
Enter fullscreen mode Exit fullscreen mode

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'
})
Enter fullscreen mode Exit fullscreen mode
  • 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();
}
)
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
schemetastic profile image
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)
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
tarekibnkhayer profile image
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.

Collapse
 
schemetastic profile image
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:

Hope this helps, welcome!