$30 off During Our Annual Pro Sale. View Details »

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. PROSPER OTEMUYIWA | @unicodeveloper | ZEIT DAY SF 2018
    Authentication &
    Authorization in Next.js

    View Slide

  2. I OPEN SOURCE
    @unicodeveloper

    View Slide

  3. GOOGLE DEVELOPER EXPERT

    View Slide

  4. forLoop Africa
    Angular Nigeria
    Laravel Nigeria
    DEVELOPER ADVOCATE

    View Slide

  5. Let’s take a trip down memory
    lane
    ...well, not really. Might as well be current

    View Slide

  6. TRADITIONAL AUTHENTICATION

    View Slide

  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

    View Slide

  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?

    View Slide

  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.

    View Slide

  10. MODERN ARCHITECTURE

    View Slide

  11. MODERN ARCHITECTURE FOR APPS
    Decouple Everything

    View Slide

  12. MODERN ARCHITECTURE FOR APPS

    View Slide

  13. MODERN ARCHITECTURE FOR APPS
    ◍ Microservices everywhere
    ◍ Single Page Applications
    (SPA) everywhere
    ◍ Scalability needed

    View Slide

  14. Secure the Server
    Protect the Client

    View Slide

  15. JSON WEB TOKEN

    View Slide

  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.

    View Slide

  17. JWT AUTHENTICATION CONTINUES
    ◍ Subsequent HTTP requests to
    the server carries the token
    as an Authorization Header.

    View Slide

  18. JWT AUTHENTICATION CONTINUES
    ◍ If the token is valid, the
    requested resource is
    returned else a 401 status
    code is returned.

    View Slide

  19. JWT AUTHENTICATION CONTINUES
    ◍ The Server receives the
    token,decodes it, and
    verifies it against a secret.

    View Slide

  20. JWT STRUCTURE

    View Slide

  21. Sample code to get and store tokens

    View Slide

  22. Common way to set session in React apps.

    View Slide

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

    View Slide

  24. Enter Next.js

    View Slide

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

    View Slide

  26. Just Look at You. We’re Isomorphic!!!

    View Slide

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

    View Slide

  28. Next.js: JWT Auth Approach
    Cookies

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  32. Step by Step
    ◍ The Cookie keeps you logged in.
    ◍ Once the cookie gets deleted, you get logged out.

    View Slide

  33. Next.js: JWT Auth Approach
    For the Demo: Two HOCs - First(Default Page)

    View Slide

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

    View Slide

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

    View Slide

  36. Next.js: JWT Auth Approach
    /secret

    View Slide

  37. Thanks to Luis for this demo

    View Slide

  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/

    View Slide

  39. Thanks!

    View Slide