The Authenticator
component adds complete authentication flows
to your application with minimal boilerplate.
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
Then run amplify pull
to sync your amplifyconfiguration.json
with your cloud backend:
amplify pull
This will update your amplifyconfiguration.json
with your latest backend configuration for the Authenticator.
Step 2. Install dependencies
Add amplify_authenticator, amplify_flutter, and amplify_auth_cognito packages as a dependencies.
environment:
sdk: ">=2.18.0 <4.0.0"
flutter: ">=3.3.0"
dependencies:
amplify_flutter: ^1.0.0
amplify_auth_cognito: ^1.0.0
amplify_authenticator: ^1.0.0
Step 3. Add the Authenticator
The quickest way to get started is by wrapping your MaterialApp widget with the Authenticator widget. Once an end-user has created an account & signed in, the MaterialApp will be displayed.
Add the authenticator to your app by wrapping the MaterialApp widget in the Authenticator widget, and then set the MaterialApp's builder
to Authenticator.builder()
.
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';
import 'amplifyconfiguration.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
void initState() {
super.initState();
_configureAmplify();
}
void _configureAmplify() async {
try {
await Amplify.addPlugin(AmplifyAuthCognito());
await Amplify.configure(amplifyconfig);
safePrint('Successfully configured');
} on Exception catch (e) {
safePrint('Error configuring Amplify: $e');
}
}
Widget build(BuildContext context) {
return Authenticator(
child: MaterialApp(
builder: Authenticator.builder(),
home: const Scaffold(
body: Center(
child: Text('You are logged in!'),
),
),
),
);
}
}