Looking for an AuthStateProvider for aws-amplify-react

[mrcoles]

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

I’m finding the aws-amplify-react classes too narrow in their application for how I’d like to setup auth on my web app. For example, I want to build a website that allows for both unauthenticated and authenticated users to visit it. I want to make the sign-up only require email + password (e.g., see this issue). I want the nav bar to show the logged-in/out state. I don’t want the login screen to be a subcomponent within the UI.

Describe the solution you'd like

It seems like there should be a Provider component that you can wrap around your entire application, and then you can “connect” children components within the app to access the Provider state. Things that you might connect would be an AuthWidgets component (login/logout/forgot-password/verify) and maybe an account state in the nav. This is like the way redux does a provider model.

Example:

index.js

<AuthStateProvider>
  <App />
</AuthStateProvider>

components/Account.js

const Account = props => (
  <div>
    <h2>Account</h2>
    <AuthWidgets {...props} />
  </div>
);

// NOTE - maybe AuthWidgets would have its own implicit connectAuthState and this is unnecessary

export default connectAuthState(Account)

components/NavAccount.js

const NavAccount = props => (
  <div>State: {props.authState}</div>
);

export default connectAuthState(NavAccount);

I saw there’s an AuthStateWrapper component hiding in this repo: Auth/AuthStateWrapper.jsx. It looks reasonably easy to convert to a Provider, but it’s not exposed by the aws-amplify-react package!

Describe alternatives you've considered

Alternatives:

1. Write my auth handling by hand using just Auth and Hub and avoid aws-amplify-react
2. Hack around with Authenticator to see if I can bend it into doing what I want here.

Additional context

Am I potentially missing a key insight into how I should be using this library? 😬

[andreikho]

@mrcoles having the same issue. I just wish they would have done it the same way firebase did it, so much easier... Let me know if you figure this out, would be glad to hear a solution

[mrcoles]

After a lot of exploration and tinkering, I have ended up using the hosted UI (which requires a deep dive into configuring that along with cloudformation edits to add "email" as a username attribute—because I wanted login via email—and an extra lambda function to deal with uniqueness issues of emails—but the hosted UI seems to be the only way to get federated users into the cognito user pool) with my react app and I have written my own AuthProvider in the app (which is simpler when using the hosted UI). I could try to braindump this info at some point… I wish this were all easier to setup.

[Aedalus]

Hitting this same issue. I'd love to either see the internal module exported, or an example of best practice.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ericclemmons]

Auth state is now provided via onAuthUIStateChange:

https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#onauthuistatechange

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.