Code: https://github.com/lohanidamodar/flappwrite_tracker/tree/feat-login
In this lesson, we will learn to authenticate our user using their credentials.
Login screen
Create a screen where user can provide their details to create an account.
Copy all the files in the linked folder to your project.
lib/features/login_screen/
├── login_screen.dart
└── src
├── login_form.dart
├── login_screen.dart
└── types.dart
Update home page to add navigation to login screen
In lib/home_page/home_page.dart
file
- add a button to navigate to login screen
- Complete code in github
...
ElevatedButton(
onPressed: () {
// navigate to login screen
context.goNamed(LoginScreen.name);
},
child: const Text('Login'),
),
...
Add login screen to router
In lib/router/router.dart
file
- add a route for login up screen
- Complete code in github
...
GoRoute(
path: '/login',
name: LoginScreen.name,
builder: (_, __) {
return LoginScreen(onLogin: (email, password) async {
debugPrint('$email - $password');
// get the instance of Appwrite class that we defined
// in the dependencies using GetIt
final appwrite = GetIt.instance.get<Appwrite>();
// create a session for the user using their email and password
final session = await appwrite.createEmailSession(email, password);
debugPrint(jsonEncode(session?.toMap() ?? '{}'));
});
},
),
...
Create session for user
In lib/appwrite/appwrite.dart
file
- add a new method createEmailSession to create a session for the user using their email and password
- code in github
class Appwrite {
final Client client = Client();
late final Account account;
// rest of the...
Future<Session?> createEmailSession(String email, String password) async {
try {
final session =
await account.createEmailSession(email: email, password: password);
return session;
} on AppwriteException catch (e) {
debugPrint(e.message);
return null;
}
}
}
- You can now run the app login using the credentials you used to create user in previous lesson.
- Once logged in you can see the session details in the debug console
- Also, visit the Appwrite dashboard click on see the user in the Auth section of the corresponding project. You should be able to see the session in the sessions tab.