Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Authentication & Authorization in Next.js

Authentication & Authorization in Next.js

Otemuyiwa Prosper

April 28, 2018
Tweet

More Decks by Otemuyiwa Prosper

Other Decks in Programming

Transcript

  1. TRADITIONAL AUTHENTICATION - INVALID CREDENTIALS ◍ A user submits some

    credentials ◍ The credentials are checked against a database. ◍ If the credentials are invalid, an error message is thrown back to the user
  2. TRADITIONAL AUTHENTICATION - VALID CREDENTIALS ◍ A user submits some

    credentials ◍ The credentials are checked against a database. ◍ If the credentials are valid, a session is created for the user on the server. The session can be stored in files, a cache store like Redis, a database, etc WHAT HAPPENS NEXT?
  3. TRADITIONAL AUTHENTICATION - VALID CREDENTIALS ◍ A Cookie with a

    Session ID is sent back to the browser. ◍ Subsequent HTTP requests to the server carries the cookie. And they are verified against the session every time.
  4. MODERN ARCHITECTURE FOR APPS ◍ Microservices everywhere ◍ Single Page

    Applications (SPA) everywhere ◍ Scalability needed
  5. JWT AUTHENTICATION ◍ A user submits some credentials ◍ The

    credentials are checked against a database. ◍ If the credentials are valid, a token is created, signed and returned to the client in response. ◍ Token is saved in local Storage or Cookies.
  6. JWT AUTHENTICATION CONTINUES ◍ Subsequent HTTP requests to the server

    carries the token as an Authorization Header.
  7. JWT AUTHENTICATION CONTINUES ◍ If the token is valid, the

    requested resource is returned else a 401 status code is returned.
  8. Next.js: JWT Auth Approach ◍ Store your JWT in a

    Cookie ◍ Cookies are sent in HTTP headers with both requests and responses ◍ Cookies can be retrieved from the headers via req.headers.cookie. ◍ Validate a user against the decoded token from the cookie on the server and grant access if the token is valid else redirect to login.
  9. Step by Step ◍ User submits an email to a

    form with a text box ◍ Server validates if the email exists in the db. ◍ If it doesn’t, create a new account, a token and send an email to the user. ◍ In the users box, there’s a verify link with a token.
  10. Step by Step ◍ Verify registration ◍ User clicks on

    the link, token is verified, and then the user is logged in. ◍ User submits an email, clicks login. It sends a POST request to the server. ◍ A token is generated, and then a security code is sent together with a link to the users inbox. ◍ User clicks on the verify link. The token is verified on the server and sets a cookie on server and client.
  11. Step by Step ◍ The Cookie keeps you logged in.

    ◍ Once the cookie gets deleted, you get logged out.
  12. Resources ◍ https://auth0.com/resources/ebooks/jwt-handbook ◍ https://github.com/luisrudge/next.js-auth0 ◍ Firebase Authentication ◌ https://github.com/zeit/next.js/tree/e451218900b16e721db1041373

    4ca7a964c53677/examples/with-firebase-authentication ◍ Next.js / Passport / Express Authentication ◌ https://github.com/arunoda/coursebook-server/ ◌ https://github.com/arunoda/coursebook-ui/