DEV Community 👩‍💻👨‍💻

Finn Kranzosch
Finn Kranzosch

Posted on

Appwrites Account Service

Introduction

The following article discusses Appwrite's Account Service using a sample project. The Account Service can be used to authenticate users of an Appwrite application. In addition, the Account Service can be used to manage user information of the authenticated user. Many different methods are provided for authentication. This article covers simple email/password validation using the Appwrite Web SDK.

Account vs. Users Service

The Appwrite Account Service is not the same as the Appwrite Users Service. While the Account Service only acts in the area of the logged-in user, the Users Service uses an Appwrite API Key and thus has full access to all Appwrite users.

Project Creation

Like pretty much all other Appwrite resources, users are tied to a specific project. Therefore, for this article, we will first create a new project in the Appwrite Console. The Appwrite Console is accessible after installation (Installation - Appwrite Docs) via the browser and the corresponding domain/port.

Project Creation in Appwrite Console

Now, in order for the Appwrite Web SDK to access Appwrite's various interfaces, a platform must be added to the project. Under Add Platform on the project's home page, New Web App is selected and then the name and hostname of the platform is filled in. It is important that the hostname corresponds to the domain from which the Appwrite API is to be accessed.

Platform Creation in Appwrite Console

Getting started with Appwrite Web SDK

To demonstrate the principles of the Appwrite Account Service, a simple sample application is created using HTML and Javascript. As mentioned in the introduction, Appwrite provides many different SDKs. The classic SDK for front-end web applications is the Web SDK.

The framework of the following examples consists of only two files. The first file (index.html) describes the interface of the application and the second (script.js) contains the code to access the Appwrite API.

There are several ways to include the web SDK. One of them is to include it via a Content Delivery Network. This is done by simply adding the following script tag to the HTML file.

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

The whole structure of the file index.html looks like this:

<html>
    <body>

    </body>

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

Now the SDK can be accessed with JavaScript. However, before the account service can be used, the SDK must be initialized.

In script.js:

const sdk = new Appwrite();

sdk
    .setEndpoint('[APPWRITE-API-ENDPOINT]')
    .setProject('[APPWRITE-PROJECT-ID]')
;
Enter fullscreen mode Exit fullscreen mode

The values for [APPWRITE-API-ENDPOINT] and [APPWRITE-PROJECT-ID] must be adjusted according to the environment. Both the endpoint and the Project ID can be found in the Appwrite project settings in the Appwrite Console.

Create an Account

Now that all the necessary conditions are in place, the first user can be created.

In script.js:

async function createAccount(){
try {
         let response = await sdk.account.create('[EMAIL]', '[PASSWORD]', '[NAME]');
            console.log(response);
    } catch (error) {
         console.error(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

The first two arguments of sdk.account.create are required. A name does not need to be specified. To execute the creation, an HTML button is associated with the created function.

In index.html:

...
<body>
        <button onclick="createAccount()">Create Account</button>
</body>
...
Enter fullscreen mode Exit fullscreen mode

A simple HTTP server for static files is enough to run the application. This can be achieved quickly and easily with Python. Just execute the following command in the directory of the index.html file: python -m http.server 8080. This starts a local server on port 8080 and the page can be accessed at http://localhost:8080. Now, when the Create Account button is clicked for the first time, a response should be displayed in the browser console. To verify that a new user has actually been created, you can open the Users tab in the Appwrite Console. The new user should now appear here.

User Overview

When the button is clicked again, the error message that the account already exists appears in the console. In a real application, e-mail, username and password should of course be requested interactively from the user and not be permanently defined in the code.

Login to Account

In order to log in to the user account just created, a new function is created, which creates a new session with the email/password combination.

In script.js:

async function login(){
    try {
            let response = await sdk.account.createSession('[EMAIL]', '[PASSWORD]');
            console.log(response);
    } catch (error) {
            console.error(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

This function is again bound to an HTML button:

<body>
        ...
        <button onclick="login()">Login</button>
</body>
...
Enter fullscreen mode Exit fullscreen mode

If Login is clicked now, the response should be displayed in the browser console. This means that the user is logged in. This can be verified in the Appwrite Console. You should now see a new session under Users > [YOUR USERACCOUNT] > Sessions.

Sessions in Console

Logout from current Account

After a user has logged in, he should of course be able to log out again. For this purpose, a simple JavaScript function is created again.

In script.js:

async function logout(){
    try {
            let response = await sdk.account.deleteSession('current');
            console.log(response);
    } catch (error) {
            console.error(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

The parameter that the sdk.account.deleteSession function takes is either the specific session ID or simply current. In this case, the current session is deleted and thus the user is logged out of the current system. Again, a new button is created:

...
<body>
        ...
        <button onclick="logout()">Logout</button>
</body>
...
Enter fullscreen mode Exit fullscreen mode

Get Account Information

To get various information about the logged in user the function sdk.account.get can be used. The corresponding function in the sample application looks like this:

In script.js:

async function getAccount(){
    try{
            let account = await sdk.account.get();
            console.log(account);
    } catch (error) {
            console.error(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

And in index.html:

...
<body>
        ...
        <button onclick="getAccount()">Get Current Account</button>
</body>
...
Enter fullscreen mode Exit fullscreen mode

When a logged-in user clicks Get Current Account, the browser console displays various information about that user.

Update Username

Like all previous functions, this one is also very similar in structure.

In script.js:

async function updateName(){
    try {
            let response = await sdk.account.updateName('[NEWNAME]');
            console.log(response);
    } catch (error) {
            console.error(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

In index.html:

<body>
        ...
        <button onclick="updateName()">Update Username</button>
</body>
...
Enter fullscreen mode Exit fullscreen mode

After clicking the Update Username button, Get Account can be clicked again to verify in the browser console that the account name has been changed.

Delete Account

It is also possible to delete one's own account via the Appwrite Account Service. In this case, all access for the account is blocked, but documents and files of the user remain and can be deleted separately.

The code is adapted as follows:

async function deleteAccount() {
    try {
            let response = await sdk.account.delete();
            console.log(response);
    } catch (error) {
            console.error(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

In index.html:

...
<body>
        ...
        <button onclick="deleteAccount()">Delete Account</button>
</body>
...
Enter fullscreen mode Exit fullscreen mode

After clicking on Delete Account a login is no longer possible. In the Appwrite console, the account is displayed as blocked and can be reactivated from there.

Blocked Account

Conclusion and further information

This article showed just a few of the many features provided by the Appwrite Account Service. More in-depth information can be found at the following links:

Top comments (0)

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs