-
Notifications
You must be signed in to change notification settings - Fork 92
Approach to authorisation with One-App #521
Hi all, I was wondering what approach people are taking when authorising apps using One-App? Especially when mixing server side rendering with data loads with client side rendering as well.
I'm thinking of a doing a classic OAuth flow server side on initial render and returning the tokens in the state for client side ajax requests but also as a cookie for any re-renders server side. Probably encrypting the refresh token server side and having an explicit "refresh" endpoint for client side refreshes.
Wondering if there are any other (simpler) approaches I've missed?
All reactions
You should be able to follow the classic OAuth flows. If you can i would avoid setting tokens in state, instead I would suggest looking at making use of createBrowserLikeFetch and thecreateSsrFetch api to use cookies from the initial request from the browser to other server side fetch requests and also setting cookies on the server response.
A good place to handle some of the auth flow might be in a modules onEnterRouteHook
MyModule.onEnterRouteHook = (store) => (nextState, replace, callback) => {
store.dispatch(authenticate()).then(() => {
if (!store.getState().isAuthenticated) replace('/login');
callback();
});
};
dispatching an action gives access to the configured ssr fet...
Replies: 1 comment
You should be able to follow the classic OAuth flows. If you can i would avoid setting tokens in state, instead I would suggest looking at making use of createBrowserLikeFetch and thecreateSsrFetch api to use cookies from the initial request from the browser to other server side fetch requests and also setting cookies on the server response.
A good place to handle some of the auth flow might be in a modules onEnterRouteHook
MyModule.onEnterRouteHook = (store) => (nextState, replace, callback) => {
store.dispatch(authenticate()).then(() => {
if (!store.getState().isAuthenticated) replace('/login');
callback();
});
};
dispatching an action gives access to the configured ssr fetch client which is provided as an additional redux thunk arg
const authenticate = () => (dispatch, getState, { fetchClient }) => {
// use the fetchClient to make the requests
// on the client it will be fetch, server your configured ssr fetch using createSsrFetch
}