netlify-gated-sites icon indicating copy to clipboard operation
netlify-gated-sites copied to clipboard

How to create Single Sign On flows with role based access controls & functions

Netlify Gated Sites

This repo demonstrates how you can use Role Based Access Controls, Netlify functions and role based _redirects to create single sign on flows.

TLDR; You can use netlify functions + any identity provider (Auth0, Okta, Netlify identity etc) to gate as many Netlify sites as they want!

Examples

  • Using Okta
  • ... add your provider here!

How does it work?

The protected sites can only be access after logging in through the Login Portal site.

We are using a combination of Netlify functions, Access Control and role based _redirects


              ┌────────────────────────────────────┐                                                     
              │     User visits the gated site     │                                                     
              │                                    │                                                     
              │             gated.com              │◀───────────────────────────────────────────────────┐
              │                                    │                                                    │
              └────────────────────────────────────┘                                                    │
                                 │                                                                      │
                                 ▼                                                                      │
     ┌──────────────────────────────────────────────────────┐                                           │
     │             Netlify role based redirects             │                                           │
     │        check for 'nf_jwt' cookie + user role         │                                           │
     │                                                      │                                           │
     │            via Netlify `_redirect` rule:             │                                           │
     │                                                      │                                           │
     │                /* /:splat 200! Role=*                │                                           │
     └──────────────────────────────────────────────────────┘                                           │
                                 │                                                                      │
                   Has valid jwt + correct role?                                                        │
                                 │                                                                      │
                                 │                                                                      │
            ┌──────yes───────────┴──────────────No────────────┐                                         │
            │                                                 │                                         │
            │                                                 │                                         │
            │                                                 │                                         │
            ▼                                                 ▼                                         │
 ┌─────────────────────┐    ┌───────────────────────────────────────────────────────────────────┐       │
 │      Success!       │    │                                                                   │       │
 │                     │    │                                                                   │       │
 │   Show gated site   │    │                 Redirect to Login Portal Site via                 │       │
 │                     │    │                     Netlify `_redirect` rule:                     │       │
 └─────────────────────┘    │                                                                   │       │
                            │  /* https://login-portal.com/?site=https://gated.com/:splat 302!  │       │
                            │                                                                   │       │
                            │                                                                   │       │
                            └───────────────────────────────────────────────────────────────────┘       │
                                                              │                                         │
                                                              ▼                                         │
                                         ┌─────────────────────────────────────────┐                    │
                                         │                                         │                    │
                                         │       User logs into Portal Site        │                    │
                                         │                                         │                    │
                                         └─────────────────────────────────────────┘                    │
                                                              │                                         │
                                                              │                                         │
                                                              ▼                                         │
                                           ┌─────────────────────────────────────┐                      │
                                           │    Netlify function triggered to    │                      │
                                           │         verify Okta session         │                      │
                                           │                                     │                      │
                                           └─────────────────────────────────────┘                      │
                                                              │                                         │
                                                              │                                         │
                                                    is Okta session valid?                              │
                                                              │                                         │
                                                              │                                         │
                                 ┌───────────No───────────────┴─────yes─────┐                           │
                                 │                                          │                           │
                                 │                                          │                           │
                                 │                                          │                           │
                                 │                                          │                           │
                                 ▼                                          ▼                           │
               ┌──────────────────────────────────┐     ┌──────────────────────────────────────┐        │
               │  Redirect back to login portal   │     │                                      │        │
               │       & show error message       │     │     Generate `nf_jwt` cookie and     │        │
               │                                  │     │   set cookie in function response    │        │
               │        "Session invalid"         │     │                                      │        │
               └──────────────────────────────────┘     └──────────────────────────────────────┘        │
                                                                            │                           │
                                                                            │                           │
                                                                            │                           │
                                                                            ▼                           │
                                                       ┌─────────────────────────────────────────┐      │
                                                       │     Then redirect back to original      │      │
                                                       │  referrer to set cookie on gated site   │      │
                                                       │                                         │      │
                                                       │   gated-site.com/set-cookie Function    │      │
                                                       └─────────────────────────────────────────┘      │
                                                                            │                           │
                                                                            ▼                           │
                                                          ┌───────────────────────────────────┐         │
                                                          │                                   │         │
                                                          │  Set nf_jwt cookie on gated.com   │         │
                                                          │                                   │         │
                                                          └───────────────────────────────────┘         │
                                                                            │                           │
                                                                            │                           │
                                                                            └─────────────┐             │
                                                                                          │             │
                                                                                          ▼             │
                                                                              ┌──────────────────────┐  │
                                                                              │                      │  │
                                                                              │ Redirect to original │  │
                                                                              │    URL requested     │──┘
                                                                              │                      │   
                                                                              └──────────────────────┘   

Demo