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

Authentication & Authorization in Next.js

Authentication & Authorization in Next.js

1097492785caf9ffeebffeb624202d8f?s=128

Otemuyiwa Prosper

April 28, 2018
Tweet

Transcript

  1. PROSPER OTEMUYIWA | @unicodeveloper | ZEIT DAY SF 2018 Authentication

    & Authorization in Next.js
  2. I OPEN SOURCE @unicodeveloper

  3. GOOGLE DEVELOPER EXPERT

  4. forLoop Africa Angular Nigeria Laravel Nigeria DEVELOPER ADVOCATE

  5. Let’s take a trip down memory lane ...well, not really.

    Might as well be current
  6. TRADITIONAL AUTHENTICATION

  7. 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
  8. 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?
  9. 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.
  10. MODERN ARCHITECTURE

  11. MODERN ARCHITECTURE FOR APPS Decouple Everything

  12. MODERN ARCHITECTURE FOR APPS

  13. MODERN ARCHITECTURE FOR APPS ◍ Microservices everywhere ◍ Single Page

    Applications (SPA) everywhere ◍ Scalability needed
  14. Secure the Server Protect the Client

  15. JSON WEB TOKEN

  16. 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.
  17. JWT AUTHENTICATION CONTINUES ◍ Subsequent HTTP requests to the server

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

    requested resource is returned else a 401 status code is returned.
  19. JWT AUTHENTICATION CONTINUES ◍ The Server receives the token,decodes it,

    and verifies it against a secret.
  20. JWT STRUCTURE

  21. Sample code to get and store tokens

  22. Common way to set session in React apps.

  23. Call the method in the view in React apps.

  24. Enter Next.js

  25. Next.js Apps ◍ Pages are server-rendered ◍ Can’t read localStorage

    on the Server
  26. Just Look at You. We’re Isomorphic!!!

  27. How do we approach auth in Next.js?

  28. Next.js: JWT Auth Approach Cookies

  29. 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.
  30. 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.
  31. 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.
  32. Step by Step ◍ The Cookie keeps you logged in.

    ◍ Once the cookie gets deleted, you get logged out.
  33. Next.js: JWT Auth Approach For the Demo: Two HOCs -

    First(Default Page)
  34. Next.js: JWT Auth Approach For the Demo: Second HOCs (Secure

    Page)
  35. /sign-in /sign-off Next.js: JWT Auth Approach

  36. Next.js: JWT Auth Approach /secret

  37. Thanks to Luis for this demo

  38. 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/
  39. Thanks!