I am using the auth0-react library to log into my app as an SPA. I have the following…
const fetchToken =
fromPromise(async ({input}) => {
let token;
const audience = 'https://billing.secondave.net';
const scope = 'openid profile read:transactions';
const authorizationParams = {
audience,
scope
}
try {
console.log("Getting token silently");
token = await input.getAccessTokenSilently({
authorizationParams
});
} catch (e) {
console.log("Getting token with popup");
token = await input.getAccessTokenWithPopup({
authorizationParams
});
}
if (!token) {
throw new Error('Failed to fetch token');
}
return {
endpoint: input.endpoint,
token
};
});
export const simpleMachine = createMachine({
initial: 'idle',
context: {
transactions: [],
monthlyData: [],
categoryAverages: [],
categories: [],
monthlyGroups: {},
token: null,
endpoint: null
},
states: {
idle: {
on: {
FETCH: 'fetchingToken',
UPDATE: 'updating',
DELETE: 'deleting'
}
},
fetchingToken: {
invoke: {
src: fetchToken,
input: ({context, event}) => {
console.log("Here we are");
return {
input: event.token,
endpoint: event.endpoint,
getAccessTokenSilently: event.getAccessTokenSilently,
getAccessTokenWithPopup: event.getAccessTokenWithPopup
}
},
onDone: {
target: 'loading'
},
onError: {
target: 'idle',
actions: ({context, event}) => {
console.error('Failed to fetch token', event.data);
}
}
}
},
....
export const StateProvider = ({ children }) => {
const {
getAccessTokenSilently,
getAccessTokenWithPopup
} = useAuth0();
const [simpleState, simpleSend] = useMachine(simpleMachine);
const [messageState, messageSend] = useMachine(messageMachine);
useEffect(() => {
simpleSend({
type: 'FETCH',
endpoint: '/api/transaction',
getAccessTokenSilently,
getAccessTokenWithPopup
});
}, []);
...
return (
<StateContext.Provider value={value}>
{children}
</StateContext.Provider>
);
This seems very onerous since I have to pass the functions to the state graph from the StateContext.Provider. Is there a way to tightly integrate Auth0 and XState to avoid this?