Hi there,
I have a main WordPress site, example.org, and a SPA on a subdomain of that site, app.example.org. So I’m using the implicit grant flow. The main site requires no authentication, I only need it for the app. What I would like is for the user to click a link within the main site, taking them to the app. If the user is not logged in they see the Auth0 hosted login page. So the app is completely unavailable unless the user is logged in. As far as I can see there are two possible ways to achieve this:
- Add some logic to my app’s top-level UI code which checks if the user is authenticated, and if not calls
auth0.authorize(), redirecting to the hosted login page. The user then logs in, and is redirected back to the app, which then renders its UI. - Call
auth0.authorize()from the main site, when the user clicks the link - or perhaps just add a link to my auth0.com endpoint, with the relevant query params.
I can see pros and cons with both approaches. The first keeps all of the authorization code in one place, where it should be (the app). However it also involves multiple redirects - first I redirect to my app index page from the main site, then authorize() redirects the user to the login page, then after being authorized they’re redirected to my callback url, then that redirects them to my index page again… nasty (furthermore, since I’m using React I would likely put the authorize() call in componentDidMount, which would mean an initial call to the component’s render() before redirecting). The second approach involves fewer redirects, but in that case the auth code (or a link to example.auth0.com, with query parameters) has to be added to the main site - which is not ideal, particularly if different developers are working on the two sites (as in our case).
So what I’m wondering is if there any alternatives to the scenarios I’ve described?
Many thanks,
Chris