Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Axolodev/next-appwrite-users

App that showcases how to use Next.js with Appwrite as its backend
https://github.com/Axolodev/next-appwrite-users

appwrite nextjs

Last synced: about 1 month ago
JSON representation

App that showcases how to use Next.js with Appwrite as its backend

Awesome Lists containing this project

README

        

# Appwrite Next.js Authentication

Next.JS App that uses Appwrite as its backend. It features:

- A simple signup and login flow, powered by [Appwrite's web SDK](https://www.npmjs.com/package/appwrite)
- Two API routes that handle User data. Both routes require authorization which is done through [Appwrite's Node SDK](https://www.npmjs.com/package/node-appwrite). More about them on [API Routes](#api-routes)

## Setup

### Installing dependencies

Clone this repository and install its dependencies:

```bash
# npm
npm install
# or yarn
yarn
```

### Setting up Environment Variables

Create a `.env.local` file based on the `.env.local.example` file included in the project. It should have the following values:

| Value | Description | Example |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| NEXT_PUBLIC_APPWRITE_HOSTNAME | The URL where your Appwrite server is hosted. Include the protocol and no trailing slash | https://appwrite.example.com |
| NEXT_PUBLIC_APPWRITE_PROJECT_ID | Your Project ID generated by Appwrite. You can get it from `Your Project > Settings > Project ID` ([Screenshot](/gitAssets/screenshot-1.png)) | abc123abc123 |
| APPWRITE_SECRET_API_KEY | An API Key with permissions for `users.read` and `users.write`. ([Screenshot](/gitAssets/screenshot-2.png)) | abcasdfpojo123432 |
| ADMIN_TEAM_ID | A team where all your users with Admin rights will be included. You can find the ID on `Authentication > Teams > Select a team > Team ID`. ([Screenshot](/gitAssets/screenshot-3.png)) | 863451289065430265436 |

### Launching the project

Run the project by using

```bash
npm run dev
# Or
yarn dev
```

## API Routes

| Route | Description | Requirements |
| ------------ | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| users/all | Gets an array with all the users that have registered in the app. | User needs to be authenticated and part of the Admin team. Refer to [Setting up Environment Variables](#setting-up-environment-variables) for more information. |
| users/\[id\] | Gets a single user based on their ID. If using `me` as the id, it will return the current user's profile. | User needs to be authenticated to get their own profile, or to be part of the Admin team to get other users. Refer to [Setting up Environment Variables](#setting-up-environment-variables) for more information. |

## Support

If you need help with this app or found a bug, you can submit an issue on the Issues tab or by messaging me on Twitter [@Axolodev](https://twitter.com/axolodev)

## Screenshots

![Simple login page with email and password fields](/gitAssets/app_screenshot-1.png)
![User list on the home page. Every user has their name, email, and a link to their profile page.](/gitAssets/app_screenshot-2.png)
![Very simple user profile. Just the user's name, email, and their first initial](/gitAssets/app_screenshot-3.png)