@rick-tibbe This is just a wild guess but it sounds like you may be "misusing" your api routes. Again, a total guess, but you may want to consider if you truly want the routes you have under api need to be under api in the first place. You could, and maybe should, utilize the web routes for endpoints that stay in the realm of your web app. Otherwise you'd need to remove the auth layer from your api and override with custom middleware that can handle a webhook/jwt request. I would really reconsider what needs to live at the api level and just keep that limited to 3rd party oauth request authorization. If you're concerned about code duplication for your api look into ways to mitigate that with api resources, traits, etc. Logging into SSO and redirecting to an api route/subdom seems off to me.
Single Sign On (SSO) with a Laravel API and Vue SPA
I'm looking to set up SSO on my Laravel API with Vue.js SPA on the front-end. I've looked into SSO already, and most of these solutions are session-based. However, the Laravel API is (per best practices) stateless, so I can't make use of sessions on the auth API.
My environment:
- I've got 3 Vue applications: one.app, two.app, and three.app (different domains, not subdomains)
- Each application has got a unique Laravel API & database
- There is a central authentication app (also Vue): auth.app, with its unique API and database
- Each app & API can use the auth.app API & db for authentication purposes
- Each API is exposed on the api.[domain].app subdomain
My desired flow:
- When user A goes to either one of the apps for the first time (let's consider one.app), they are not authenticated because there is no JWT stored in the auth store (Vuex with localStorage)
- When they click Sign in (or need to be authenticated), they'll be redirected to auth.app to sign in
- User A enters their credentials on auth.app (Vue front-end)
- Auth.app calls its API (api.auth.app) to authenticate the user
- On successful authentication, user A will be redirected back to one.app with a JWT the API returned
- One.app stores the JWT and user A is now signed in
- User A goes to two.app
- (?)
- User A is now automatically signed in at two.app, without having to do anything (preferably even without redirecting the user to auth.app at all)
As you can see, there are some holes in my desired flow:
- As api.auth.app is stateless, how should I 'recreate' a session inside the auth.app Vue frontend (e.g., what data should be stored there)?
- What should I do at step 8? How can I make two.app fetch the session from auth.app to sign in automatically?
- Maybe more?
What I thought about to fix this:
- Make a request from each app to api.auth.app to fetch the session, however, api.auth.app is stateless and cannot return the session
- Make api.auth.app stateful and return the session like above; however, this won't work because of CORS and the apps not being on a subdomain
- Open auth.app in an (invisible) iframe, and exchange the Vuex state through eventListeners. Seems reasonable, but I read about some security concerns. Can these concerns be avoided?
The case above is fully theoretical and nothing has been built (yet), so if things are better done differently, I'd be open for your suggestions! The only requirements are that each app has a Vue front-end and a Laravel back-end (except for auth.app if it's really necessary).
I'm really interested in how this case could be implemented. Doesn't need to be a detailed implementation but can be abstract like the description above.
Please or to participate in this conversation.