Add Auth to React context using Provider pattern

[VicStor]

Is your feature request related to a problem? Please describe.
A pattern used for Authenticator (withAuthenticator) React component is hardly extensible.
Prev feature request
Describe the solution you'd like
Use Provider pattern to track authentication state.

Describe alternatives you've considered
Here is very basic implementation

import React, { useEffect, useState } from 'react'
import createReactContext from 'create-react-context'
import { Hub, Auth } from 'aws-amplify'
const { Consumer: AuthConsumer, Provider } = createReactContext()

const AUTHENTICATOR_AUTHSTATE = 'amplify-authenticator-authState'

const AuthProvider = props => {
	const [auth, setAuth] = useState({})
	useEffect(() => {
		Auth.currentAuthenticatedUser()
			.then(user => {
				console.log('Current user: ', user)
				localStorage.setItem(AUTHENTICATOR_AUTHSTATE, 'signedIn')
				setAuth({ state: 'signIn', user })
			})
			.catch(err => localStorage.getItem(AUTHENTICATOR_AUTHSTATE))
			.then(cachedAuthState => cachedAuthState === 'signedIn' && Auth.signOut())
	}, [])
	useEffect(() => {
		Hub.listen('auth', ({ payload }) => {
			const { event, data } = payload
			if (event === 'signOut') {
				setAuth({ state: event, user: null })
				localStorage.deleteItem(AUTHENTICATOR_AUTHSTATE)
				return
			}
			localStorage.setItem(AUTHENTICATOR_AUTHSTATE, 'signedIn')
			setAuth({ state: event, user: data })
		})
	}, [])
	return <Provider value={auth}>{props.children}</Provider>
}

export { AuthConsumer, AuthProvider }

Wrap app in AuthProvider

<AuthProvider>
    <App />
</AuthProvider>

Use auth context where you need it

<AuthConsumer>
  {auth=>
    auth.user
    ? (
        <Button
            onClick={_ => Auth.signOut()/*...*/}
           children='Log Out'
        />
    ) : (
        <Button
            onClick={_ => Auth.signIn(/*...*/)/*...*/}
           children='Log Out'
        />
    )
  }
</AuthConsumer>

Additional context
Let me know you not mind to add this. I could implement it quite easily.

[jordanranz]

This seems like a necessary improvement. Definitely open to reviewing a PR.

I am currently working on an RFC to introduce web components with StencilJS. With this project we would ideally implement a similar design using Stencil's state tunnel. These components could then be used in any framework including the major ones we support.

[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.

[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.

[stale]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[kjellski]

Did this ever really make it into the package? I can't find it...

[matt-d-webb]

I'd love to know this too? I can't find any other references.

[brendonparker]

Bump

[lebull]

@VicStor Thanks a ton for the example implementation for this, using it in my codebase for now.

Why in the world does this still not come with the amplify react library? This should be a no-brainer.

[undefobj]

Reopening cc @ericclemmons @sammartinez

[akeithly]

This would be particularly handy for those of us not using the UI Components. They already have the onAuthUIStateChange to work with but many of need to build custom login components.

[Ajit-Singh-Brar]

I was following the same template for the Provider pattern for AuthProvider. The following commented line:

useEffect(() => {
		Hub.listen('auth', ({ payload }) => {
			const { event, data } = payload
			if (event === 'signOut') {
				setAuth({ state: event, user: null })
				localStorage.deleteItem(AUTHENTICATOR_AUTHSTATE)
				return
			}
			localStorage.setItem(AUTHENTICATOR_AUTHSTATE, 'signedIn')
			setAuth({ state: event, user: data })    //     when this statement gets executed it is causing problem at my forgotPassword component which never shows me the ResetPassword component when the user receives the confirmation code.  
		})
	}, [])

That statement with comment, if it is actually commented then it is affecting the authState. When I am trying to perform the signIn. It gets authenticated but doesn't redirects to the page . Once refreshed it, it shows the actual page, until unless not. How can I solve this issue

[Ajit-Singh-Brar]

Hi @ericclemmons , can you help me with this issue to solve the problem which is happening on the Sign In and ForgotPassword component. If I am commenting the "setAuth" statement, the ForgotPassword works properly, but authentication on Sign IN, afetr signing In doesn't redirects to the actual page after login.

It will be very kind, if you help me out on this

[ericclemmons]

@Ajit-Singh-Brar So I understand, you'd like a hook or provider for the Auth category that you can use on its own?

(This sounds related to #254)

The @next release introduces an Authenticator.Provider & useAuthenticator() hook for a truly customized experience (see: #532).

Until then, I've personally used the following useAuth() hook in my code:

import { Auth, Hub } from 'aws-amplify';

import { useEffect, useState } from 'react';

export default function useAuth() {
  const [isLoading, setIsLoading] = useState(true);
  const [user, setUser] = useState();

  const handleAuth = ({ payload }) => {
    switch (payload.event) {
      case 'signIn':
        return setUser(payload.data);
      case 'signOut':
        return setUser();
      default:
    }
  };

  useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then(setUser)
      .catch(console.error)
      .then(() => setIsLoading(false));

    Hub.listen('auth', handleAuth);

    return () => Hub.remove('auth', handleAuth);
  }, []);

  return {
    Auth,
    isLoading,
    owner: user ? user.username : null,
    user
  };
}

It doesn't require a provider, so you would be able to use it like:

function App() {
  const { isLoading, user } = useAuth()

  if (isLoading) return "Loading..."

  if (user) {
    return <h1>Welcome {user.username}!</h1>
  }

  return <MyCustomSignInScreen />
}

[Ajit-Singh-Brar]

Thanks. It has solved my problem.

[ericclemmons]

That's great to hear! In the meantime, I'll close this as resolved via #532 and we'll get the documentation added for useAuthenticator as part of #552.