I am having a tremendously difficult time understanding how to separate a react app into login/admin/client and share the tokens from the login to client/admin after authentication with auth0
this article explains how to use nodejs to serve up different parts of the app at a time, which is what I want for complete separation. There are so many SO threads about this but I can't seem to find anything anywhere about how to achieve this when integrated with auth0.
here is one saying to use code-splitting in webpack, but every tutorial for webpack/nextjs wateva just uses fake authentication.
My react app is separated into 3 SPAs: login, admin, non-admin.
So the flow should go:
| step # | client-side | nodejs server-side | auth0 token-serving |
|---|---|---|---|
| 1. | visit homepage -> | nodejs receives request for login SPA | |
| 2. | client browser <- | nodejs sends back login SPA | |
| 3. | client presses login button -> | nodejs receives request for authentication | |
| 4. | nodejs sends request to auth0 for authentication -> | auth0 receives request for authentication | |
| 5. | nodejs receives token <- | auth0 sends token | |
| 6. | client receives admin/non SPA WITH TOKEN <- | nodejs sends admin/non SPA | |
| 7. | client makes call to API -> | nodejs receives call from client and checks VALID TOKEN |
I am lost as how to authorize the admin/non-admin SPAs based on authentication having taken place in the login SPA! What am I missing here?! How does step #6 occur on the server-side?
Do I need to share tokens between the apps? How? Where does this happen? Do I need to use nodejs server-side authentication as detailed here then render the token into the SPA before serving? Do I need to set cookies or something? Is the session cookie already set? How then does the auth0-react object in the admin/client SPA know? What is it that I'm missing here?
EDIT: I may have found a solution here with server-side rendering. It may be that I can either:
a) inject the desired app straight into the loginSPA via the App component and on client-side place a call to API with token instead of rendering a straight App component
e.g. index.js:
<>
{fetch(token)}
</>
b) simply render server-side and pass in the token via the initialState parameter.
e.g. src/server.js:
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';
module.exports = function render(initialState) {
// Model the initial state
const store = configureStore(initialState);
let content = renderToString(<Provider store={store} ><App /></Provider>);
const preloadedState = store.getState();
return {
content,
preloadedState
};
};
However, I'm not sure if this will solve token refresh or logout/login redirect on token expiry. Will need to test and report back which may take some time as modern SSR and Redux are both new for me.