Authentication & Authorization in Next.js

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!