Aws - React and cognito is built into the auth amplify component.
yarn add aws-amplify
info All dependencies
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
yarn add aws-amplify-react
info All dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
For React and React Native apps:
For the UI, see UI React components
The simplest way to add authentication flows into your app is to use the withAuthenticator Higher Order Component.
import { withAuthenticator } from 'aws-amplify-react';
export default withAuthenticator(App);
The withAuthenticator HOC wraps the Authenticator component.
Advanced: the Signature is (code)
withAuthenticator(Comp, includeGreetings = false, authenticatorComponents = [], federated = null, theme = null, signUpConfig = {})
You can then wrap it up like that if you want only three fields for the Signup
withAuthenticator(<App />, {
federated: {
google_client_id: "yourGoogleClientID"
},
signUpConfig: {
header: "Create a new account for nico",
hideAllDefaults: true,
signUpFields: [
{
label: "Username",
key: "username",
required: true,
placeholder: "Username",
displayOrder: 1
},
{
label: "Password",
key: "password",
required: true,
placeholder: "Password",
type: "password",
displayOrder: 3
},
{
label: "Email",
key: "email",
required: true,
placeholder: "Email",
type: "email",
displayOrder: 2
}
]
}
});
Ref: Allow simple customization of sign-up and sign-in attributes in React Authenticator #2160
Using authenticator directly gives you more customization options for your UI.
Using Authenticator gives more customization options for the UI. See doc
Example:
import { Authenticator, Greetings } from 'aws-amplify-react';
const federated = {
google_client_id: 'yourGoogleClientID',
facebook_app_id: 'yourFacebookClientID',
amazon_client_id: 'yourAmazonClientID'
};
<Authenticator hide={[Greetings]} federated={federated}>
<Main />
</Authenticator>
Full options:
<Authenticator
// Optionally hard-code an initial state
authState="signIn"
// Pass in an already authenticated CognitoUser or FederatedUser object
authData={CognitoUser | 'username'}
// Fired when Authentication State changes
onStateChange={(authState) => console.log(authState)}
// An object referencing federation and/or social providers
// The federation here means federation with the Cognito Identity Pool Service
// *** Only supported on React/Web (Not React Native) ***
// For React Native use the API Auth.federatedSignIn()
federated={myFederatedConfig}
// A theme object to override the UI / styling
theme={myCustomTheme}
// Hide specific components within the Authenticator
hide={
[
Greetings,
SignIn,
ConfirmSignIn,
RequireNewPassword,
SignUp,
ConfirmSignUp,
VerifyContact,
ForgotPassword,
TOTPSetup,
Loading
]
}
// or hide all the default components
hideDefault={true}
// Pass in an aws-exports configuration
amplifyConfig={myAWSExports}
// Pass in a message map for error strings
errorMessage={myMessageMap}
>
// Default components can be customized/passed in as child components.
// Define them here if you used hideDefault={true}
<Greetings federated={federated}/>
<SignIn federated={myFederatedConfig}/>
<ConfirmSignIn/>
<RequireNewPassword/>
<SignUp signUpConfig={signUpConfig}/>
<ConfirmSignUp/>
<VerifyContact/>
<ForgotPassword/>
<TOTPSetup/>
<Loading/>
</Authenticator>
Amplify provides a withOAuth Higher Order Component to:
Alternatively use Auth.federatedSignIn() to get AWS credentials directly from Cognito Federated Identities and not use User Pool federation. If you have logged in with Auth.signIn() you can not call Auth.federatedSignIn() as Amplify will perform this federation automatically for you in the background.