Add Auth to React context using Provider pattern about amplify-ui HOT 15 CLOSED

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

from amplify-ui.

Reopening cc @ericclemmons @sammartinez

from amplify-ui.

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.

from amplify-ui.

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

from amplify-ui.

@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 />
}

from amplify-ui.

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.

from amplify-ui.

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.

from amplify-ui.

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.

from amplify-ui.

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

from amplify-ui.

Bump

from amplify-ui.

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

from amplify-ui.

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

from amplify-ui.

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

from amplify-ui.

Thanks. It has solved my problem.

from amplify-ui.

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.

from amplify-ui.