Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SDK-2106] Memoize auth methods #150

Merged
merged 3 commits into from
Oct 30, 2020
Merged

[SDK-2106] Memoize auth methods #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
716ff27
Memoize auth methods
adamjmcgrath Oct 28, 2020
c560483
fix import
adamjmcgrath Oct 28, 2020
100225c
Merge branch 'master' into memo-fns
adamjmcgrath Oct 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions __tests__/auth-provider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,4 +457,16 @@ describe('Auth0Provider', () => {
__raw: '__test_raw_token__',
});
});

it('should memoize the getIdTokenClaims method', async () => {
const wrapper = createWrapper();
const { waitForNextUpdate, result, rerender } = renderHook(
() => useContext(Auth0Context),
{ wrapper }
);
await waitForNextUpdate();
const memoized = result.current.getIdTokenClaims;
rerender();
expect(result.current.getIdTokenClaims).toBe(memoized);
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even tho this is mostly just testing that we are using useCallback and that it is working as expected, I actually like this test.
Would it make sense to add a test for the other functions as well?

Could probably make it a single test:

[
  { name: 'getIdTokenClaims', cb: (provider) => provider.getIdTokenClaims },
  { name: 'loginWithRedirect', cb: (provider) => provider.loginWithRedirect },
].forEach(({name, cb}) => 
  it(`should memoize the ${name} method`, async () => {
    const wrapper = createWrapper();
    const { waitForNextUpdate, result, rerender } = renderHook(
      () => useContext(Auth0Context),
      { wrapper }
    );
    await waitForNextUpdate();
    const memoized = cb(result.current);
    rerender();
    expect(cb(result.current)).toBe(memoized);
  })
);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea - I'd do this but my IDE doesn't like dynamically creating tests - it doesn't let me run them from the gui. (I know that shouldn't stop me from doing it, but I really like running my tests like that 🤷)

});
125 changes: 73 additions & 52 deletions src/auth0-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useReducer, useState } from 'react';
import React, { useCallback, useEffect, useReducer, useState } from 'react';
import {
Auth0Client,
Auth0ClientOptions,
Expand All @@ -10,6 +10,7 @@ import {
RedirectLoginOptions as Auth0RedirectLoginOptions,
GetTokenWithPopupOptions,
GetTokenSilentlyOptions,
GetIdTokenClaimsOptions,
} from '@auth0/auth0-spa-js';
import Auth0Context, { RedirectLoginOptions } from './auth0-context';
import { hasAuthParams, loginError, tokenError } from './utils';
Expand Down Expand Up @@ -225,67 +226,87 @@ const Auth0Provider = (opts: Auth0ProviderOptions): JSX.Element => {
})();
}, [client, onRedirectCallback, skipRedirectCallback]);

const loginWithPopup = async (
options?: PopupLoginOptions,
config?: PopupConfigOptions
): Promise<void> => {
dispatch({ type: 'LOGIN_POPUP_STARTED' });
try {
await client.loginWithPopup(options, config);
} catch (error) {
dispatch({ type: 'ERROR', error: loginError(error) });
return;
}
const user = await client.getUser();
dispatch({ type: 'LOGIN_POPUP_COMPLETE', user });
};
const loginWithRedirect = useCallback(
(opts?: Auth0RedirectLoginOptions): Promise<void> =>
client.loginWithRedirect(toAuth0LoginRedirectOptions(opts)),
[client]
);

const logout = (opts: LogoutOptions = {}): void => {
client.logout(opts);
if (opts.localOnly) {
dispatch({ type: 'LOGOUT' });
}
};
const loginWithPopup = useCallback(
async (
options?: PopupLoginOptions,
config?: PopupConfigOptions
): Promise<void> => {
dispatch({ type: 'LOGIN_POPUP_STARTED' });
try {
await client.loginWithPopup(options, config);
} catch (error) {
dispatch({ type: 'ERROR', error: loginError(error) });
return;
}
const user = await client.getUser();
dispatch({ type: 'LOGIN_POPUP_COMPLETE', user });
},
[client]
);

const getAccessTokenSilently = async (
opts?: GetTokenSilentlyOptions
): Promise<string> => {
let token;
try {
token = await client.getTokenSilently(opts);
} catch (error) {
throw tokenError(error);
}
const user = await client.getUser();
dispatch({ type: 'GET_TOKEN_COMPLETE', user });
return token;
};
const logout = useCallback(
(opts: LogoutOptions = {}): void => {
client.logout(opts);
if (opts.localOnly) {
dispatch({ type: 'LOGOUT' });
}
},
[client]
);

const getAccessTokenWithPopup = async (
opts?: GetTokenWithPopupOptions,
config?: PopupConfigOptions
): Promise<string> => {
let token;
try {
token = await client.getTokenWithPopup(opts, config);
} catch (error) {
throw tokenError(error);
}
const user = await client.getUser();
dispatch({ type: 'GET_TOKEN_COMPLETE', user });
return token;
};
const getAccessTokenSilently = useCallback(
async (opts?: GetTokenSilentlyOptions): Promise<string> => {
let token;
try {
token = await client.getTokenSilently(opts);
} catch (error) {
throw tokenError(error);
}
const user = await client.getUser();
dispatch({ type: 'GET_TOKEN_COMPLETE', user });
return token;
},
[client]
);

const getAccessTokenWithPopup = useCallback(
async (
opts?: GetTokenWithPopupOptions,
config?: PopupConfigOptions
): Promise<string> => {
let token;
try {
token = await client.getTokenWithPopup(opts, config);
} catch (error) {
throw tokenError(error);
}
const user = await client.getUser();
dispatch({ type: 'GET_TOKEN_COMPLETE', user });
return token;
},
[client]
);

const getIdTokenClaims = useCallback(
(opts?: GetIdTokenClaimsOptions): Promise<IdToken> =>
client.getIdTokenClaims(opts),
[client]
);

return (
<Auth0Context.Provider
value={{
...state,
getAccessTokenSilently,
getAccessTokenWithPopup,
getIdTokenClaims: (opts): Promise<IdToken> =>
client.getIdTokenClaims(opts),
loginWithRedirect: (opts): Promise<void> =>
client.loginWithRedirect(toAuth0LoginRedirectOptions(opts)),
getIdTokenClaims,
loginWithRedirect,
loginWithPopup,
logout,
}}
Expand Down