message: packages/core: add logout and provider storage to SignInPage
diff: * limitations under the License.
  */
  -import React, { FC } from 'react';
  +import React, { FC, useLayoutEffect } from 'react';
  import { Page } from '../Page';
  import { Header } from '../Header';
  import { Content } from '../Content/Content';
  import { ContentHeader } from '../ContentHeader/ContentHeader';
  import { Grid, Typography, Button } from '@material-ui/core';
  import { InfoCard } from '../InfoCard/InfoCard';
  -import { SignInPageProps } from '@backstage/core-api';
  +import { SignInPageProps, SignInResult } from '@backstage/core-api';
  -const GuestProvider: FC<SignInPageProps> = ({ onResult }) => (
  +const PROVIDER_STORAGE_KEY = '@backstage/core:SignInPage:provider';
  +
  +type ProviderProps = SignInPageProps & {
  + selected: boolean;
  +};
  +
  +const GuestProvider: FC<ProviderProps> = ({ selected, onResult }) => {
  + useLayoutEffect(() => {
  + if (selected) {
  + onResult({ userId: 'guest' });
  + }
  + }, [selected, onResult]);
  +
  + return (
  <Grid item>
  <InfoCard
  title="Guest"
  @@ -47,21 +60,44 @@ const GuestProvider: FC<SignInPageProps> = ({ onResult }) => (
  </InfoCard>
  </Grid>
  );
  +};
  -export type SignInProviders = 'guest';
  +export type SignInProvider = 'guest';
  export type Props = SignInPageProps & {
  - providers: SignInProviders[];
  + providers: SignInProvider[];
  };
  export const SignInPage: FC<Props> = ({ onResult, providers }) => {
  + // We can't use storageApi here, as it might have a dependency on the IdentityApi
  + const selectedProvider = localStorage.getItem(PROVIDER_STORAGE_KEY);
  +
  + const makeResultHandler = (provider: SignInProvider) => (
  + result: SignInResult,
  + ) => {
  + localStorage.setItem(PROVIDER_STORAGE_KEY, provider);
  +
  + onResult({
  + ...result,
  + logout: async () => {
  + localStorage.removeItem(PROVIDER_STORAGE_KEY);
  + await result.logout?.();
  + },
  + });
  + };
  +
  return (
  <Page>
  <Header title="Login" />
  <Content>
  <ContentHeader title="Select a sign-in method" />
  <Grid container>
  - {providers.includes('guest') && <GuestProvider onResult={onResult} />}
  + {providers.includes('guest') && (
  + <GuestProvider
  + selected={selectedProvider === 'guest'}
  + onResult={makeResultHandler('guest')}
  + />
  + )}
  </Grid>
  </Content>
  </Page>
  