DEV Community

loading...
Cover image for Introducing the New Appwrite Anonymous Login
Appwrite

Introducing the New Appwrite Anonymous Login

Torsten Dittmann
Fullstack Engineer
・4 min read

It is important to consider the user experience when someone first comes to your application. The registration process can often prove to be a hurdle for users to use an application, especially if parts of the application are bound to an authentication process and hidden behind a login screen. Moreover, in today's world, the issue of privacy and data protection is a delicate one, especially because of new data privacy regulation, like GDPR and CPRA.

Appwrite 0.8 introduces Anonymous Login as an authentication method, which allows users to create an account without providing personal information such as an email address, username or password.

Why do we need anonymous users?

This feature is especially useful if you want to provide an easy authentication process for an underage audience, mobile apps or use cases where you don't want to store personal information to ensure users anonymity for sensitive subjects like politics or religion.

With Appwrite you can offer your users the option to create an anonymous account, as well as the possibility to convert it into a full-fledged account with an e-mail address and password or linking to an OAuth2 service provider at a later stage.

Setup

Enough talking, let's learn how we can add Anonymous Authentication to a Web and a Flutter Application using our Web SDK and Flutter SDK. The same can be done with other client SDKs we might release in the future.

Web

The first step is to add our Web SDK to our project with NPM like this:

npm install appwrite --save
Enter fullscreen mode Exit fullscreen mode

If you're using a bundler (like Rollup or webpack), you can import the Appwrite module when you need it:

import { Appwrite } from "appwrite";
Enter fullscreen mode Exit fullscreen mode

To install with a CDN (content delivery network) add the following scripts to the bottom of your tag, but before you use any Appwrite services:

<script src="https://cdn.jsdelivr.net/npm/appwrite"></script>
Enter fullscreen mode Exit fullscreen mode

The next step is to initialize your SDK code with your project ID which can be found in your project settings page:

// Init your Web SDK
const appwrite = new Appwrite();

appwrite
    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
    .setProject('455x34dfkj') // Your Appwrite Project ID
;
Enter fullscreen mode Exit fullscreen mode

Flutter

The first step is to add our Flutter SDK to our project.

Add appwrite: ^0.6.0 or the latest version in your project's pubspec.yaml file under dependencies.

dependencies:
    appwrite: ^0.6.0
Enter fullscreen mode Exit fullscreen mode

Then run following command to download the dependencies or upon saving your IDE might automatically run this command.

flutter pub get
Enter fullscreen mode Exit fullscreen mode

Next step is to initialize your SDK code with your project ID which can be found in your project settings page:

import 'package:appwrite/appwrite.dart';
final client = Client();

client
    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
    .setProject('455x34dfkj') // Your Appwrite Project ID
;
Enter fullscreen mode Exit fullscreen mode

Create an Anonymous User

Once your SDK is setup, access the Account service and call the createAnonymousSession() method.

Web

// Create an anonymous user and login
appwrite.account.createAnonymousSession()
    .then(response => {
        console.log(response); // Success
    }, error => {
        console.log(error); // Failure
    });
Enter fullscreen mode Exit fullscreen mode

Flutter

// Create an anonymous user and login
final account = Account(client);
try {
    final res = await account.createAnonymousSession();
    print(res);
} on AppwriteException catch(e) {
    print(e.message);
}
Enter fullscreen mode Exit fullscreen mode

If the createAnonymousSession() method completes without error, the request will create an anonymous user and automatically logs in the user, setting up the cookie for following requests. Now the user is authenticated and is allowed to access his or her private data and settings.

Convert to Permanent User

When an anonymous user signs up, you might want to allow them to continue their work with a permanent account. This will also allow the user to recover his account in the future and switch between devices.

With Appwrite there is 2 ways of doing so.

E-Mail

By updating the email address of an anonymous account, we can pass an email address and a password to the account.updateEmail method.

Web

let promise = appwrite.account.updateEmail('email@example.com', 'secret');

promise.then(function (response) {
    console.log(response); // Success
}, function (error) {
    console.log(error); // Failure
});
Enter fullscreen mode Exit fullscreen mode

Flutter

try {
    final res = await account.updateEmail(email: 'email@example.com', password:'secret');
    print(res);
} on AppwriteException catch(e) {
    print(e.message);
}
Enter fullscreen mode Exit fullscreen mode

This will convert the anonymous user to a permanent account with email@example.com as email and secret as his or her password.

OAuth2

By calling the account.createOAuth2Session method from an anonymous account, the user will be automatically converted.

Web

appwrite.account.createOAuth2Session('google', 'https://localhost/success', 'https://localhost/failure');
Enter fullscreen mode Exit fullscreen mode

Flutter

account.createOAuth2Session(provider: 'google');
Enter fullscreen mode Exit fullscreen mode

Conclusion

Both options offer users to transfer all their information to an account and use them on other devices.

If you need help or encounter any difficulties setting up Anonymous Login with Appwrite, please join our Discord.

References

Photo by Jason Dent on Unsplash

Discussion (0)