Authentication & Authorization in Next.js

Slide 1

Slide 1 text

PROSPER OTEMUYIWA | @unicodeveloper | ZEIT DAY SF 2018 Authentication & Authorization in Next.js

Slide 2

Slide 2 text

I OPEN SOURCE @unicodeveloper

Slide 3

Slide 3 text

GOOGLE DEVELOPER EXPERT

Slide 4

Slide 4 text

forLoop Africa Angular Nigeria Laravel Nigeria DEVELOPER ADVOCATE

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

TRADITIONAL AUTHENTICATION

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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?

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

MODERN ARCHITECTURE

Slide 11

Slide 11 text

MODERN ARCHITECTURE FOR APPS Decouple Everything

Slide 12

Slide 12 text

MODERN ARCHITECTURE FOR APPS

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Secure the Server Protect the Client

Slide 15

Slide 15 text

JSON WEB TOKEN

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

JWT STRUCTURE

Slide 21

Slide 21 text

Sample code to get and store tokens

Slide 22

Slide 22 text

Common way to set session in React apps.

Slide 23

Slide 23 text

Call the method in the view in React apps.

Slide 24

Slide 24 text

Enter Next.js

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

How do we approach auth in Next.js?

Slide 28

Slide 28 text

Next.js: JWT Auth Approach Cookies

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Next.js: JWT Auth Approach /secret

Slide 37

Slide 37 text

Thanks to Luis for this demo

Slide 38

Slide 38 text

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/

Slide 39

Slide 39 text

Thanks!