Skip to content

Latest commit

 

History

History
112 lines (73 loc) · 3.85 KB

cm4x9f9ej000009l3auxm15ve.md

File metadata and controls

112 lines (73 loc) · 3.85 KB
Raw
title seoTitle seoDescription datePublished cuid slug cover tags
Day 6: Implementing User Authentication in Appwrite
Appwrite User Authentication Implementation Guide
Learn how to implement user authentication in Appwrite for your apps, focusing on Google Auth integration using Appwrite Console and Web SDK
Fri Dec 20 2024 21:25:51 GMT+0000 (Coordinated Universal Time)
cm4x9f9ej000009l3auxm15ve
day-6-implementing-user-authentication-in-appwrite
authentication, backend, databases, typescript, appwrite

Welcome to Day 6 of our Appwrite series. Today we’ll explore implementing user authentication in Appwrite to secure our note-taking app.

Introduction

User authentication is a crucial aspect of any web application. It ensures that only authorized users can access and modify data. In this article, we’ll implement user authentication in Appwrite

Implementing User Authentication in Appwrite

To implement user authentication in Appwrite, you can use the Appwrite Console or the Appwrite CLI.

Using the Appring Console

  1. Log in to your Appwrite dashboard.

  2. Navigate to your project.

  3. Click on the Authentication tab in the left sidebar.

  4. Click on the Settings tab.

  5. Choose an authentication provider (e.g. Email/Password, Google, Facebook, etc.).

  6. Select Google as the provider.

  7. Enter your Googe Client ID and Client Secret.

  8. Click the Update button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734727643960/45eabf4d-5c3a-49da-938a-63b95758979c.png align="center")

Implementing Google Auth in Your App

You’ll need to use the Appwrite Web SDK to implement Google Auth in your app. First, install the SDK using npm:

npm install appwrite

Next, import the SDK in your auth.ts file

// auth.ts
import { Appwrite } from 'appwrite';

const appwrite = new Appwrite();
appwrite
    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
    .setProject('your-project-id') // Your PROJECT ID

Endpoint and Project ID can be found on your project settings page.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734727623575/ee4b4a62-d966-41cb-9ed6-3428abf39977.png align="center")

Authenticating with Google

We’ll need to redirect the user to the Google Auth page to authenticate with Google. We can do this using the appwrite.auth.redirect method:

// auth.ts
appwrite.auth.redirect('google', 'http://localhost:8080/callback')
    .then(() => {
        console.log('Redirected to Google Auth page');
    })
    .catch((error) => {
        console.error(error);
    });

This will redirect the user to the Google Auth page. After the user authenticates, Google will redirect them back to your app.

Handling the Callback

To handle the callback, you’ll need to create an endpoint that receives the authentication code from Google. You can do this using the appwrite.auth.callback method:

// callback.ts
appwrite.auth.callback('google', 'http://localhost:8080/callback')
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.error(error);    
    });

This will exchange the authentication code for an access token, which you can use to authenticate requests to Appwrite.

Conclusion

In this article, we implemented user authentication in Appwrite using Google Auth. We set up Google Auth in Appwrite, implemented Google Auth in our app, authenticated with Google, and handled the callback.

Stay tuned for Day 7, where we’ll explore implementing authorization in Appwrite.

Additional Resources