DEV Community

loading...
Cover image for #30DaysofAppwrite : Login and Signup
Appwrite

#30DaysofAppwrite : Login and Signup

lohanidamodar profile image Damodar Lohani ・5 min read

Intro

Appwrite is an open-source, self-hosted Backend-as-a-Service that makes app development easier with a suite of SDKs and APIs to accelerate app development. #30DaysOfAppwrite is a month long event focussed at giving developers a walkthrough of all of Appwrite's features, starting from the basics to more advanced features like cloud functions! Alongside we will also be building a fully featured Medium Clone to demonstrate how these concepts can be applied when building a real world app. We also have some exciting prizes for developers who follow along with us!

Login and Signup

Authenticating and authorizing your users to validate their requests or to save their data is an integral part of modern application development life cycle. This is something we do in every application. Appwrite makes this process very simple by abstracting away all the features regarding user management, providing us with a nice sleek API. The authentication features of Appwrite support Email & Password based authentication as well as various OAuth2 providers such as Google, Facebook, GitHub, Twitter and many more. You can find the list of all supported providers in your Appwrite Console -> Users -> Providers. Upcoming version of Appwrite will also add support for Anonymous Login.

Authentication, user management, teams, and roles are all handled by Appwrite by default. In today's session we will continue on our demo from last session and add authentication functionality. We will implement Sign Up and Sign In. So let's get started.

If you have not already, please go through the previous episodes of 30 Days of Appwrite.

Getting Started with the Project

Now the fun begins. We have created a base project from where we will start implementing more features using Appwrite in our app. To continue with following sections and upcoming days, you need to clone or download our base project. You can find our base project here. From here on we will be building upon this starter project. So please clone or download it so that you can follow along.

Create Signup and Login Components

First we will create our Login and Signup components and set up routes to those components.

Signup component

Let's add a Register component src/routes/Register.svelte.

<!-- Signup page -->
<script>
  import { api } from "../appwrite";

  let name,
    mail,
    pass = "";

  const submit = async () => {
    try {
      await api.register(mail, pass, name);
    } catch (error) {
      console.log(error.message);
    }
  };
</script>

<div>
  <h1>Register</h1>
  <form on:submit|preventDefault={submit}>
    <label for="mail"><b>Name</b></label>
    <input
      bind:value={name}
      type="text"
      placeholder="Enter Name"
      name="name"
      required
    />

    <label for="mail"><b>E-Mail</b></label>
    <input
      bind:value={mail}
      type="email"
      placeholder="Enter E-mail"
      name="mail"
      required
    />

    <label for="pass"><b>Password</b></label>
    <input
      bind:value={pass}
      type="password"
      placeholder="Enter Password"
      name="pass"
      required
    />

    <button type="submit">Register</button>
  </form>
</div>

<style>
    div {
     margin-left: auto;
     margin-right: auto;
     width: 400px;
   }
    form {
        display: flex;
        flex-direction: column;
    }
</style>

Enter fullscreen mode Exit fullscreen mode

As you can see, our submit function here is calling api.register(name, mail, pass). So we need to implement register functionality.

Handle Register

Let's create src/appwrite.js file where we will use Appwrite SDK to handle register functionality.

import Appwrite from "appwrite"; //importing from Appwrite's SDK
import { state } from "./store"; // saving user data to svelte store

const sdk = new Appwrite();
sdk
  .setEndpoint("https://demo.appwrite.io/v1") //set your own endpoint
  .setProject("607dd16494c6b"); //set your own project id

export const api = {
    register: async (name, mail, pass) => {
        try {
            await sdk.account.create(mail, pass, name);
            await api.login(mail, pass)
        } catch (error) {
            throw error;
        }
    },
}
Enter fullscreen mode Exit fullscreen mode

In the register function, we are calling the sdk.account.create method. We are passing in mail, password and name for the account to be created. The create method from the Account service is responsible for creating the account with the given details.

Login component

Let's add a new component scr/routes/Login.svelte.

<!-- Login page -->
<script>
  import { api } from "../appwrite";

  let mail,
    pass = "";

  const submit = async () => {
    try {
      await api.login(mail, pass);
    } catch (error) {
      console.log(error.message);
    }
  };
</script>
<div>
  <h1>Login</h1>
  <form on:submit|preventDefault={submit}>
    <label for="mail"><b>E-Mail</b></label>
    <input
      bind:value={mail}
      type="email"
      placeholder="Enter E-mail"
      name="mail"
      required
    />

    <label for="pass"><b>Password</b></label>
    <input
      bind:value={pass}
      type="password"
      placeholder="Enter Password"
      name="pass"
      required
    />

    <button type="submit">Login</button>
  </form>
</div>

<style>
   div {
     margin-left: auto;
     margin-right: auto;
     width: 400px;
   }
    form {
        display: flex;
        flex-direction: column;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

If you look at the submit function, we are calling api.login(mail, pass) and our api is imported from ../appwrite. So let's create our login function that will communicate with Appwrite to perform login.

Handle Login

Again in src/appwrite.js we will create login function.


export const api = {
    //..register code
    login: async (mail, pass) => {
        try {
            await sdk.account.createSession(mail, pass);
            const user = await api.getAccount();
            state.update(n => {
                n.user = user;
                return n;
            });
        } catch (error) {
            state.update(n => {
                n.user = null;
                return n;
            });
            throw error;
        }
    },
}
Enter fullscreen mode Exit fullscreen mode

So, we first import the Appwrite SDK and create an instance with const sdk = new Appwrite();. After, we need to define the API endpoint and the project ID. You can find those in the Settings page of your Appwrite Dashboard.

In our login function we are using sdk.account.createSession(mail, pass). The createSession method from the Account service is responsible for creating the user's session if the credentials are valid. Finally we call api.getAccount() - let's implement that function as well.

export const api = {
  //...login and register code
  getAccount: async () => sdk.account.get(),
}
Enter fullscreen mode Exit fullscreen mode

For getAccount we are simply calling sdk.account.get(). The get method from the Account service will get the user profile of the user with active session. It will throw an error if no session exists.

Credits

We hope you liked this write up. You can follow #30DaysOfAppwrite on Social Media to keep up with all of our posts. The complete event timeline can be found here

Feel free to reach out to us on Discord if you would like to learn more about Appwrite, Aliens or Unicorns 🦄. Stay tuned for tomorrow's article! Until then 👋

Discussion (0)

Forem Open with the Forem app