How to build a centralized SSO for SPA users ?

Hello Laravel folks, I need to build a centralized IDP / SSO server to store and authenticate our users across our applications (Nuxt/Vuejs SPAs).

After some readings, investigations and experiments, I think that "Passport" will be the right choice to build my IDP / SSO service.

However, I'm struggling for the client-side (my SPAs). I tried several solutions : Socialite, Sanctum, from scratch code... But I cannot make a sure choice right now.

I don't want to make my users go through the complete OAuth2 authorization and authentication flow. So I believe that my SPAs backends (Laravel) will be responsible of getting the authentication and the tokens from my IDP / SSO service.

How would you build that ecosystem ? What would you advice ?

Thanks for your help

drehimself

3 years ago

Level 35

For anything SPA-related, Laravel Sanctum is the package that was written specifically for this purpose: https://laravel.com/docs/9.x/sanctum.

Setting everything up can be quite a few steps, so I would recommend using Laravel Breeze with the API option as a starting point for your Laravel backend: https://laravel.com/docs/9.x/starter-kits#breeze-and-next. This sets up all your auth endpoints like logging in, registering and password resets. It also sets up most of the configuration outlined in the Sanctum docs.

Laravel also has a reference Next.js app as an example front-end for how to communicate with the Breeze/Sanctum backend: https://github.com/laravel/breeze-next. You'll see how to do things like actually logging in, getting the csrf cookie/token, etc.

I would try to get both apps running locally and working with each other so you can start to see how auth works with this SPA architecture.

There are also a few Laracasts videos available: https://laracasts.com/series/andres-larabits/episodes/12

One from the Nuxt series that sets up Sanctum/Breeze with Nuxt: https://laracasts.com/series/nuxtjs-crash-course/episodes/8

MohamedTammam

3 years ago

Level 51

@drehimself Speaking of Sanctum and Nuxt, Nuxt has a provider for Sanctum: https://auth.nuxtjs.org/providers/laravel-sanctum/

PS: Didn't try it myself yet!

Rankus

3 years ago

Level 2

Thanks for your replies.

But just to be sure you got all the details...

Each of my apps are composed of 2 independent parts :

1 front-end (Nuxt SPAs)
1 backend (Laravel API)

I now want to add a new central app to provide a IDP/SSO service for these apps.

Can I build this new service with Sanctum ? I started buidling it with Passport.

Wil I also need Sanctum on each backend (Laravel API) ?

Rankus

3 years ago

Level 2

Also, the point I don't understand yet is : who should the SPAs ask their authentication ?

through the Laravel API backends (as proxies) ? Or directly the IDP/SSO service ?

On login, I also need the Laravel API backend to eventually create the authenticated user, usually done on OAuth callback :

$user = User::updateOrCreate(
    [
        'sso_id' => $SSOUser['id'],
    ], 
    [
        'first_name' => $SSOUser['first_name'],
        'last_name' => $SSOUser['last_name'],
        'email' => $SSOUser['email'],
        'sso_id' => $SSOUser['id'],
    ]
);

Please or to participate in this conversation.