Sign in to an End-User Application with AxAuth IDP

const SignUp: React.FC = () => {
  const { initiateUserSignUp } = useUserService();
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [error, setError] = useState<string>('');

  return (
    <Grid textAlign="center" style={{ height: '100vh' }} verticalAlign="middle">
    <Grid.Column style={{ maxWidth: 450 }}>
      <Header as="h2" textAlign="center">
        Sign-up for a new account
      </Header>
      <Form size="large" onSubmit={async (event) => {
        event.preventDefault();
        // Make the first request to the User Service, initiating the User Sign Up flow.
        const signUpResponse = await initiateUserSignUp(`${END_USER_APP_BASE_URL}/signup`, {email, password});
        if (signUpResponse.code ===  UserSignUpResponseCode.SUCCESS) {
          window.location.assign('/login');
        } else {
          setError(signUpResponse.message ? signUpResponse.message : 'Error Signing up.');
        }

      }}>
        <Segment>
          <Message color="red"hidden={error === ''}>{error}</Message>
          <Form.Input
            fluid
            icon="user"
            iconPosition="left"
            placeholder="Email address"
            type="email"
            onChange={(event) => setEmail(event.target.value)}
            value={email}
          />
          <Form.Input
            fluid
            icon="lock"
            iconPosition="left"
            placeholder="Password"
            type="password"
            onChange={(event) => setPassword(event.target.value)}
            value={password}
          />

          <Button color="black" fluid size="large">
            Register
          </Button>
        </Segment>
      </Form>
    </Grid.Column>
  </Grid>
  )
};

import { useUserService } from '@axinom/mosaic-user-auth';

export const Login: React.FC = () => {

  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [error, setError] = useState<string>('');

  const handleSignIn = async(event: React.FormEvent<HTMLFormElement>): Promise<void> => {
    event.preventDefault();
    // call the signIn method with the email and password
    const signInResponse = await signIn({
      email: email,
      password: password
    });
    if (signInResponse.code === SignInResponseCode.SUCCESS) {
      window.location.assign('/');
    } else {
      setError(`Unable to Sign In. ${signInResponse.details?.error ?? signInResponse.message}`)
    }
  }

  return (
    <Grid textAlign="center" style={{ height: '100vh' }} verticalAlign="middle">
      <Grid.Column style={{ maxWidth: 450 }}>
        <Form size="large" onSubmit={async (event: React.FormEvent<HTMLFormElement>, data: FormProps) => {
          await handleSignIn(event);
        }}>
          <Segment>
            <Header as="h5" textAlign="center">
              StreamApp Account
            </Header>
            <Message color="red" hidden={error === ''}>{error}</Message>
            <Form.Input
              fluid
              icon="user"
              iconPosition="left"
              placeholder="Email address"
              id="email"
              value={email}
              onChange={(event) => {setEmail(event.target.value)}}
            />
            <Form.Input
              fluid
              icon="lock"
              iconPosition="left"
              placeholder="Password"
              type="password"
              id="password"
              value={password}
              onChange={(event) => {setPassword(event.target.value)}}
            />

            <Button type = "submit" primary fluid size="large">
              Sign In
            </Button>
          </Segment>
        </Form>
      </Grid.Column>
    </Grid>
  );
};

export const App: React.FC = () => {
  const { getToken, addTokenChangedHandler, removeTokenChangedHandler } =
    useUserService();
  const [tokenResponse, setTokenResponse] = useState<TokenResponse | null>(
    null,
  );

  useEffect(() => {
    // Get the access token and store in tokenResponse.
    // If the token changes or removed, call getToken()
    // and refresh the token.
    (async () => {
      setTokenResponse(await getToken());
    })();
  }, [addTokenChangedHandler, getToken, removeTokenChangedHandler]);

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/profiles">
          <ProfileSelector />
        </Route>

        <Route>
          {tokenResponse === null ? (
            <LoadingPlaceholder />
          ) : tokenResponse.userToken === undefined ? (
            <LandingPage />
          ) : (
            <ProfileSelector />
          )}
        </Route>
      </Switch>
    </BrowserRouter>
  );
}