Authentication between a client website and an embedded widget client (iframe or shadowDOM)

Get Help
,
1

I am extending a widget application(Client B) to be added to a website(Client A) of a business client.

An authenticated user in Client A should be able to seamlessly login to Client B. If that is not possible, the user should be able to log in to Client B using a login form.

Client A

  • NextJS with Auth0 Regular Web App Configuration
  • No Auth0 custom domain available.
  • Not managed by me.

Client B

  • Planning to host in a separate domain. But can be hosted under the Client A website if essential for the configuration.
  • Can be served as an embedded iframe site or a shadowDOM(customElement and a script tag) widget in Client A.
  • Planning to add an Auth0 SPA client config with the same database connection.

Question
this previous thread suggests that SSO can be used for seamlessly authenticating with multiple apps.

Are there any other approaches that I can take for this scenario?

Or should I fix the custom domain issue first and implement SSO with silent authentication?

Issues recap:

  • no custom domain. If this is a major blocker, I will need to ask the business client to add a custom domain.
  • Login form inside iframe is vulnerable to Clickjacking.
2

Hello!
I faced similar kind of issue last time, I am still searching for some proper answer.

1 Like
3

ShadowDOM is not secure enough to handle auth sessions. My main concern is that cookies are managed per site and ShadowDOM widgets donot live inside a separate host. It just creates an isolated DOM in the main host site using the loaded script.
So there can be many security loopholes when using it.

I ended up with an iframe solution that loads the widget from the widget host. It uses SSO and Silent Authentication to automatically sign-in the users. It worked without a custom domain in Chrome and Firefox. Not tested in other browsers yet.

Next task is to find how to explicitly sign out the session in the widget host when the user logs out from the main host site. It will just make sure everything in the widget is invalidated.

5

Hi @nish_rm,

Welcome to the Auth0 Community!

I am glad that you managed to find a solution for establishing the session between the client app and the embedded widget. As you mentioned, a custom domain was not required to establish SSO between these two components as long as both applications used the same tenant and databases.

Regarding your clickjacking concern, you can read out documentation on enabling the necessary HTTP headers.

Otherwise, invalidating the widget’s session once the user has logged out of Client A can be quite complicated. One possible solution would be to store the widget’s session ID inside app_metadata, retrieve it on user logout, and use the management API to revoke the session.

If you have any other questions, feel free to reach out!

Have a good one,
Vlad