Add Auth to React context using Provider pattern

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.

[kjellski]

Did this ever really make it into the package? I can’t find it…

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