Amplify UI

Authenticator

Authenticator component adds complete authentication flows to your application with minimal boilerplate.

The Authenticator component adds complete authentication flows to your application with minimal boilerplate.

import React from 'react';
import { Button } from 'react-native';

import { Amplify } from 'aws-amplify';
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button title="Sign Out" onPress={signOut} />;
}

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

Quick start

Step 1. Configure backend

The Authenticator works seamlessly with the Amplify CLI to automatically work with your backend.

First, update @aws-amplify/cli with npm or yarn if you're using a version before 6.4.0:

npm install -g @aws-amplify/cli@latest
yarn global add @aws-amplify/cli@latest

Now that you have the Amplify CLI installed, you can set up your Amplify project by running amplify init in your project's root directory. Then run amplify add auth and follow the prompts to add authentication to your backend configuration.

If you have an existing backend, run amplify pull to sync your aws-exports.js with your cloud backend.

You should now have an aws-exports.js file in your src/ directory with your latest backend configuration.

Step 2. Install dependencies

npm install @aws-amplify/ui-react-native aws-amplify @aws-amplify/react-native react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill
yarn add @aws-amplify/ui-react-native aws-amplify @aws-amplify/react-native react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill

If your project will support Federated Sign In using the React Native Authenticator the @aws-amplify/rtn-web-browser package is also required:

npm install @aws-amplify/rtn-web-browser
npm install @aws-amplify/rtn-web-browser

@aws-amplify/react-native and @aws-amplify/rtn-web-browser require a minimum iOS deployment target of 13.0, open the Podfile located in the ios directory and update the target value:

- platform :ios, min_ios_version_supported
+ platform :ios, 13.0

Then install the iOS cocoapods, by running:

npx pod-install
npx pod-install

The AWS SDK requires React Native applications to polyfill crypto.getRandomValues and URL. Import the react-native-get-random-values and react-native-url-polyfill polyfills and them to the top of your application's root entry point (in most React Native apps this will be the top level index.js).

// index.js
import 'react-native-url-polyfill/auto';
import 'react-native-get-random-values';

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

Step 3. Add the Authenticator

The quickest way to get started is by wrapping your application with the Authenticator component. Once an end-user has created an account & signed in, the underlying component is rendered with access to the user.

You can use the Authenticator component directly, or wrap your app in withAuthenticator Higher-Order Component:

import React from 'react';
import { Button } from 'react-native';

import { Amplify } from 'aws-amplify';
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button title="Sign Out" onPress={signOut} />;
}

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;
import React from 'react';
import { Button } from 'react-native';

import { Amplify } from 'aws-amplify';
import {
  useAuthenticator,
  withAuthenticator,
} from '@aws-amplify/ui-react-native';

import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button onPress={signOut} title="Sign Out" />;
}

function App() {
  return <SignOutButton />;
}

export default withAuthenticator(App);

Next steps

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.