How to authenticate two applications (Wordpress and Angular) with one login

Hello,
I’m trying to configure one login via wordpress plugin and open Angular app after successful login. The Angular app should be also authenticated so it can talk to our custom python backend. So Angular app should probably get token from Wordpress on redirection. The apps are on separate Apache virtual hosts:

I’ve tried to use auth0_user_login by passing the tokens from within the hook via URL to Angular app but then the “auth0.parseHash” returns invalid_token - state does not match. What seems to be logical cause auth0 Angular sdk hadn’t initiated the flow in a first place.

So can i use the token in any way? If so how to let auth0 sdk know about the token?

Hi @lukaszkorona,

I’m not an expert on the development side of things, but if both of your applications are Auth0-enabled and they point to the same tenant, I don’t believe there is any need to pass information between your apps. If the user logs in via www.th.com, they should be able to access app.th.com via single sign-on, assuming you have set up access control to allow that.

Are you using Universal Login?

Hi @markd,
I’m currently not using Universal Login. I could easily turn it on in Wordpress. I’m still not sure how should i let my Angular app (browser) know that that user had successfully logged in.

Both apps are pointing to the same tenant but they are on different virtual hosts (Apache). My understanding is that there are only two ways for browser to authenticate. Either via cookie or a token. Because i’m not in control of Wordpress cookies i thought passing a token via URL would be an idea.

I’m currently not using Universal Login. I could easily turn it on in Wordpress.

SSO works whether that option is on or not. In the near future, it will be required for the plugin if you’re doing SSO but, for not, it is not.

Both apps are pointing to the same tenant but they are on different virtual hosts (Apache).

That’s perfectly fine. Your SSO session is with Auth0 and can be checked from either application.

My understanding is that there are only two ways for browser to authenticate. Either via cookie or a token.

This is getting a little foggy. Token authentication is typically used for accessing an API. Our WordPress plugin authenticates with Auth0 and, if successful, sets the core WordPress session cookie. After that process is done, Auth0 is basically out of the picture until the WordPress session expires or you logout. I don’t know how your Angular app is built but if you have a backend that can handle the authentication process, this is the flow you want. If it’s a pure single-page app, it’s this one.

Because i’m not in control of Wordpress cookies i thought passing a token via URL would be an idea.

You definitely don’t want to include a token in a URL for any reason. That will end up in your browser history, server logs, etc. I’m confused about why WordPress would be doing the authentication for your Angular app.

Again, regardless of the session in either application, you’ll have a session with Auth0 once you log in. So if you login to WordPress, you’ll have an Auth0 session and a WordPress one. The Angular app can check for the Auth0 session using silent authentication. If you login to the Angular app first, then you can turn on the SSO feature in WordPress and when users visit the wp-login.php page, they will be logged in automatically.

Hope that helps a bit!

1 Like

Hello @lukaszkorona
I am also on a similar boat. I am building my web front end in the WordPress and app in AngularJs.

www.domain.com (using auth0 lock)
app.domain.com ( using auth0 angualrjs example)

I am trying to find a way to build SSO so that user can dance between these two applications after first login.

Any suitable suggestion will be welcome.

1 Like