Amplify-js: Center amplify-authenticator by default

[ericclemmons]

Is your feature request related to a problem? Please describe.

The new @aws-amplify/ui-react's <AmplifyAuthenticator> isn't center on the page by default, so it appears in the top-left corner.

5727 fixes this for withAuthenticator(App) usage, but using <AmplifyAuthenticator> is inconsistent.

Describe the solution you'd like

Hoist amplify-container styles to amplify-authenticator.

Describe alternatives you've considered

Not a clear escape hatch or documentation on how positioning can be controlled by customers.

Additional context

https://github.com/aws-amplify/amplify-js/pull/5727#issuecomment-627873471

[jordanranz]

Yes, we probably don't want to apply a default centering to the authenticator but rather allow the user to style it without affecting the contained app. Additionally, the user can wrap it in amplify-container which will do the 100vh vertical and horizontal centering for them.

Both solutions above can be done today if you do not wrap your app inside of the authenticator component but you would have to control app rendering on sign in. A possible improvement could be to split the where the app renders from an authenticator-container that users can access from css.

I am going to write a new Setup guide for Auth UI Components on the Docs site that will include this information and a simple way to render your app without wrapping it in the authenticator component.

[secretshardul]

Using @aws-amplify/ui-react here. I need help to bring the authentication box in center. I've tried both of these approaches:

1. Using AmplifyAuthenticator: Using CSS properties is affecting the contained app. I do not want this

    <AmplifyAuthenticator
      usernameAlias="phone_number"
      style={{
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <MainApp /> {/* Contents of app should not move to center */}
    </AmplifyAuthenticator>

1. Using withAuthenticator: Documentation shows how to apply theme on legacy aws-amplify-react library. But this does not work with @aws-amplify/ui-react.

export default withAuthenticator(App, false, [], null, MyTheme);

[julioxavierr]

@secretshardul did you figure out how to fix this?

[secretshardul]

@julioxavierr you can use slots to customize your UI.

<AmplifyAuthenticator>
        <div slot="sign-in" style={{ textAlign: 'center' }}>
                    {/* any custom JSX here*/}
                    <AmplifySignIn usernameAlias="phone_number" />
        </div>
        </MainApp>

This way can add styling to the entire signin/signup page without affecting your main app.

[suraj-eai]

I encountered an issue using slots to position AmplifyConfirmSignUp. When we use slots, the username field is required to be filled in confirm sign up screen. And this is fixed if we remove the slot property.

 <div slot="confirm-sign-up" style={{ textAlign: 'center' }}>
        <AmplifyConfirmSignUp></AmplifyConfirmSignUp>
  </div>

I fixed the positioning Auth screens in the center with approach below:

 <AmplifyAuthenticator 
   style={signedIn ? {} : { display: 'flex', justifyContent: 'center' }}>
<Dashboard />
</AmplifyAuthenticator>

[secretshardul]

@suraj-eai I assume you were using userAlias property for phone or email based login. In this case you also need to pass userAlias to <AmplifySignIn/> and <AmplifySignUp/>

<AmplifyAuthenticator usernameAlias="phone_number">
        <div slot="sign-in" style={{ textAlign: 'center' }}>
                <AmplifySignIn usernameAlias="phone_number" />
        <div />
        <div slot="sign-up" style={{ textAlign: 'center' }}>
                <AmplifySignUp usernameAlias="phone_number" />
        <div />
</AmplifyAuthenticator>

Slots method is verbose but lets you display new components and modify the entire page.

<div slot="sign-in" style={{ textAlign: 'center' }}>
        <p>Hello world</p> {/* Displayed only in sign in page  */}
        <AmplifySignIn usernameAlias="phone_number" />
<div />

[suraj-eai]

@secretshardul Thank you for the explanation. I did use usernameAlias in <AmplifySignIn /> & <AmplifySignUp /> and was having issue with the <AmplifyConfirmSignUp />.

And I found no clear way to center the signin/sign up screens and tried the above approach.

[ashika01]

@secretshardul - The new authenticator uses CSS custom properties for theming unlike legacy theme object.

With confirm-sign-up slot, you might wanna mimic our implementation if you want the confirm signup to have the username filled.

[dabit3]

@sammartinez @jordanranz I believe this has been implemented now, right?

[atyshka]

Any suggestions on how to achieve centering using the authenticator vue component?

[dabit3]

@atyshka I can try to put together an example, but essentially you'd do something like this where you're managing the component state to show / hide the authenticator and using the css amplify-authenticator css to manage the styling:

https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#managing-user-state-and-layout

Once I've put together an example in the Vue docs I'll respond here with a link.

[atyshka]

Thanks!

[Nxtra]

This is how I currently implemented it in order to center the authenticator in case no user is found:

App.js

import React, { useState, useEffect } from "react";

import {
  AmplifyAuthenticator,
  AmplifyContainer,
  AmplifySignIn,
} from "@aws-amplify/ui-react";

import ApplicationRoutes from "./config/ApplicationRoutes";
import { AuthState, onAuthUIStateChange } from "@aws-amplify/ui-components";

import "./App.css";

function App() {
  const [authState, setAuthState] = useState();
  const [user, setUser] = useState();

  useEffect(() => {
    return onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    });
  }, []);

  return authState === AuthState.SignedIn && user ? (
    <ApplicationRoutes />
  ) : (
    <>
      <AmplifyContainer>
        <AmplifyAuthenticator>
          <ApplicationRoutes />
        </AmplifyAuthenticator>
      </AmplifyContainer>
    </>
  );
}

export default App;

And the following styling to make it work responsively:
App.css

amplify-container {
  width: auto;
  height: auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

[sammartinez]

The above pull request resolves this issue. Closing this issue as these changes are in our unstable branch and will be in the next release.