Authentication & Authorization in Next.js

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