DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Phone Authentication with Appwrite and Vonage
Aditya Oberai for Appwrite

Posted on

Phone Authentication with Appwrite and Vonage

Appwrite 1.0 was recently announced and one of the many new updates it has brought is the addition of a new phone authentication adapter, Vonage! In this tutorial weโ€™ll learn how to set up a Vonage account, configure it for use with Appwrite, and build a SvelteKit app to put it all together! Without further ado, letโ€™s get started!

Project Screenshot

๐Ÿค” New to Appwrite?

Appwrite is an open-source backend-as-a-service that abstracts all the complexity of building a modern application by providing you with a set of REST and Realtime APIs for your core back-end needs. Appwrite takes the heavy lifting for developers and handles user authentication and authorization, databases, file storage, functions, webhooks, and much more!

๐Ÿ“ฑSetting Up Vonage

The first step is to create a Vonage account. Head over to Vonageโ€™s website and sign up to use Vonage Communication APIs. On the Vonage API Dashboard, visit the Numbers tab on the sidebar and buy a Virtual Number.

Vonage Dashboard

This lets us avail a phone number that we can use to send messages from. On the dashboard, youโ€™ll also find the API Key and API Secret. Keep these handy as youโ€™ll need them in the next step.

โš™๏ธ Installing Appwrite

Next, we need to get an Appwrite server up and running. You can either choose to install it locally on your system or deploy it on the cloud with one of our one click setups.

Appwrite Dashboard

TLDR; It only takes a single magic command! ๐Ÿ˜Š

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.0.3
Enter fullscreen mode Exit fullscreen mode

This command installs Appwrite and creates an appwrite folder with docker-compose.yml and .env files. Once the installation is complete, head over to the appwrite folder.

We need to update two variables in the .env file namely _APP_PHONE_PROVIDER and _APP_PHONE_FROM. _APP_PHONE_FROM is the phone number you just obtained from Vonage and _APP_PHONE_PROVIDER is a DSN string that helps Appwrite connect to the Vonage API.

_APP_PHONE_PROVIDER takes the following format

_APP_PHONE_PROVIDER=phone://<API Key>:<API Secret>@vonage
Enter fullscreen mode Exit fullscreen mode

_APP_PHONE_FROM takes the following format

_APP_PHONE_FROM=+14344251928
Enter fullscreen mode Exit fullscreen mode

Once that is done, we need to restart the Appwrite server for the environment variables to take effect. Please note that this command needs to be executed from the appwrite folder that was created during installation.

docker compose up -d --force-recreate
Enter fullscreen mode Exit fullscreen mode

Next, head over to localhost (or your public IP address) and create a new user account followed by a project with a name of your choosing.

Copy the projectId and the endpoint from the Settings page as weโ€™ll need it for the web app we build in the next step!

๐Ÿ”ฎ Setting up Our SvelteKit Project

For this example, weโ€™ll be using SvelteKit, but the concepts and code examples remain true for all web frameworks. First, weโ€™ll need to create a new SvelteKit project and set up Tailwind CSS. The official Tailwind installation guide is very handy for this purpose.

Instead of re-inventing the wheel here, Iโ€™d recommend you to complete the setup and return back to this tutorial.

Now, itโ€™s time to install some of our dependencies. Head over to your project folder and run the following commands

npm i -D @zerodevx/svelte-toast
npm i appwrite
Enter fullscreen mode Exit fullscreen mode

Next, add the following entries into your .env file. You might need to create this file if it does not exist already.

VITE_APPWRITE_ENDPOINT=<YOUR_APPWRITE_ENDPOINT>
VITE_APPWRITE_PROJECT_ID=<YOUR_APPWRITE_PROJECT_ID>
Enter fullscreen mode Exit fullscreen mode

Donโ€™t forget to replace the values with your own Appwrite projectId and endpoint that you obtained from the Dashboard earlier.

๐Ÿ”จ Setting up the Appwrite SDK

Next, letโ€™s create our Appwrite service that will help abstract all the SDK calls to a single place. Create a new file src/lib/appwrite.ts and fill in the following contents

import { Client, Account } from 'appwrite';

const client = new Client();

client
    .setEndpoint(import.meta.env.VITE_APPWRITE_ENDPOINT)
    .setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);

const account = new Account(client);

export class AppwriteService {
    public static async getAccount(): Promise&lt;any> {
        return account.get();
    }

    public static async createAccount(email: string, password: string, name?: string): Promise<any> {
        return account.create('unique()', email, password, name);
    }

    public static async createEmailSession(email: string, password: string): Promise<any> {
        return account.createEmailSession(email, password);
    }

    public static async deleteSession(): Promise<any> {
        return account.deleteSession('current');
    }

    /** Phone Authentication endpoints */

    public static async createPhoneSession(number: string): Promise<any> {
        return account.createPhoneSession('unique()', number);
    }

    public static async updatePhoneSession(userId: string, secret: string): Promise<any> {
        return account.updatePhoneSession(userId, secret);
    }

    public static async updatePhone(number: string, password: string): Promise<any> {
        return account.updatePhone(number, password);
    }

    public static async createPhoneVerification(): Promise<any> {
        return account.createPhoneVerification();
    }

    public static async updatePhoneVerification(userId: string, secret: string): Promise<any> {
        return account.updatePhoneVerification(userId, secret);
    }

}
Enter fullscreen mode Exit fullscreen mode

Here, we import the Appwrite SDK and initialize the Client and Account services. We also export an AppwriteService class with a lot of static methods that we can use across our app. The appwrite.ts file is all it takes to integrate Appwrite into the project. All the other files deal with the UI of the project and should be fairly straightforward to read and understand.

In order to keep this tutorial concise, weโ€™ll just copy over the contents for all the other files from the completed GitHub project. Once complete, weโ€™re all ready to preview the project. Run the following command to run a local development server

npm run dev
Enter fullscreen mode Exit fullscreen mode

That brings us to the end of this tutorial! I hope this guide helped you set up phone authentication in your web app and above all, I hope you enjoyed learning something new! I had a lot of fun trying out SvelteKit for this tutorial and I canโ€™t wait to build some more apps!

๐Ÿ“š Resources

If youโ€™re stuck at any point during the tutorial, feel free to reach out for help in our friendly discord channels run by humans! If you like what we do at Appwrite, donโ€™t forget to drop us a tiny star on GitHub ๐Ÿ˜‰ Here are some great resources to help you get started.

Top comments (0)

DEV

Thank you.

ย 
Thanks for visiting DEV, weโ€™ve worked really hard to cultivate this great community and would love to have you join us. If youโ€™d like to create an account, you can sign up here.