Created
January 4, 2021 20:44
-
-
Save mtliendo/2d09b4b92d129c8b0a9a804cc410ffa5 to your computer and use it in GitHub Desktop.
AmplifyAuthenticator example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import Amplify from 'aws-amplify' | |
import { | |
AmplifyAuthenticator, | |
AmplifySignOut, | |
AmplifySignUp, | |
} from '@aws-amplify/ui-react' | |
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components' | |
import config from '../aws-exports' | |
Amplify.configure(config) | |
const authReducer = (state, action) => { | |
switch (action.type) { | |
case 'authStateChange': | |
return { authStage: action.authStage, user: action.user } | |
default: | |
throw Error(`action ${action.type} not found.`) | |
} | |
} | |
const initialState = {} | |
function MyApp({ Component, pageProps }) { | |
const [state, dispatch] = React.useReducer(authReducer, initialState) | |
React.useEffect(() => { | |
//this will fire anytime a user switches auth scenarios | |
// https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#methods--enums | |
onAuthUIStateChange((nextAuthState, data) => { | |
dispatch({ | |
type: 'authStateChange', | |
authStage: nextAuthState, | |
user: data, | |
}) | |
}) | |
}, []) | |
return state.authStage === AuthState.SignedIn && state.user ? ( | |
<> | |
<AmplifySignOut /> | |
<Component {...pageProps} /> | |
</> | |
) : ( | |
<> | |
<h1>I have the flexibility to be include a header</h1> | |
<AmplifyAuthenticator> | |
{/* don't include phone number for signup */} | |
<AmplifySignUp | |
slot="sign-up" | |
formFields={[ | |
{ type: 'username' }, | |
{ type: 'email' }, | |
{ type: 'password' }, | |
]} | |
/> | |
</AmplifyAuthenticator> | |
<footer>I have the flexibility to be a custom footer</footer> | |
</> | |
) | |
} | |
export default MyApp |
Yea, unfortunately it looks like it's still persistent. Thanks for the heads up since I wasn't aware of this issue. I'll go ahead and post my thoughts on the ticket.
@jamessouth looks like the issue is now resolved: aws-amplify/amplify-js#8227
Thanks Michael 👍
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was helpful but is it still suffering from the memory leak in issue 6840?? I put a console log in the reducer and as you login and logout the same state repeats.