# Clerk Blog — Guides — Page 7

# Authenticated data access using Clerk, Prisma, and MongoDB - A post-making fullstack app
URL: https://clerk.com/blog/clerk-prisma-mongodb-fullstack-post-app.md
Date: 2021-08-17
Category: Guides
Description: Add a complete authentication workflow with authenticated access to your Prisma API layer to your web application.

Prisma is a server-side library that helps your app read and write data to your database in an intuitive and safe way. As a next-gen ORM, Prisma lets you increase your productivity and simplify your codebase, by allowing you to write much less code for CRUD operations, and by giving you the protection of type safety.

Prisma has supported connectors for relational databases like PostgreSQL, MySQL and SQLite for quite some time. Recently though, the good folks at Prisma developed and released their MongoDB connector, which combines the type-safe Prisma TypeScript generator with the flexibility of a document store like MongoDB.\*

*\*Currently in Preview mode*

At Clerk we've been really excited about this release, so, we decided to showcase how you can easily add a complete authentication workflow to your web application along with authenticated access for your Prisma API layer.

## The post publishing application

You can find the full source code of this example in our Clerk-Prisma [starter repository](https://github.com/clerkinc/clerk-prisma-starter).

This example application will let you create an account, create posts for others to see, and browse existing user posts. Random idea sharing at its best!

![Clerk Prisma Mongodb Fullstack Post App tutorial illustration](./61c4e714599615331383c0058a018bf5b7226bf7-1497x911.png)

## Setting up the application

To run this application properly you need to configure your Clerk application, create a [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) database instance, then follow the [instructions in the repository](https://github.com/clerkinc/clerk-prisma-starter/blob/main/README.md).

### Creating a Clerk application

If you are new to Clerk you will first need to [create an account](/), then create a new application. For this application, choose the "Standard Setup". Creating a Clerk application will automatically create a development instance, which is what you'll be using.

### Creating a MongoDB Atlas database

MongoDB Atlas is the database-as-a-service solution provided by MongoDB, that gives you all the goodies of a world-class managed database service. From cross-regional resiliency, to security and performance monitoring, MongoDB Atlas is a great choice both for quickly spinning up a MongoDB instance in the cloud, and for companies that require enterprise level services.

Since we just need to get a database instance as quickly as possible for our example project, the forever-free tier is more than enough. Simply sign up, create a database, and **retrieve your secure connection URL**.

*Note: If you would rather use a local database instance, remember that [Prisma requires](https://www.prisma.io/docs/concepts/database-connectors/mongodb#example) your MongoDB instance to be in [replica-set mode](https://docs.mongodb.com/manual/replication). This comes by default with MongoDB Atlas.*

## Show me the code

To run the full example locally, you will need to follow a few small steps. First, go ahead and clone the example application.

`git clone git@github.com:clerkinc/clerk-prisma-starter.git`

Go inside your project folder and copy the .env.example file to a .env.local file.

`cp .env.example .env.local`

### Clerk Environment Variables

You will need the Frontend API value which can be found on the [dashboard](https://dashboard.clerk.com) on your development instance's home page. Add the following to your .env.local file: `NEXT_PUBLIC_CLERK_FRONTEND_API=<your-frontend-api>`.

Next you will need the Clerk API key which can also be found on your dashboard under **Settings ➜ API** **keys**. Add the following to your .env.local file:

`CLERK_API_KEY=<your-api-key>`

### Prisma setup

For Prisma to generate the required TypeScript bindings for our code and facilitate the database access layer, we need to setup a `DATABASE_URL` environment variable beside our application schema file.

Inside the `server/db/prisma` folder, create a `.env` file and there add the `DATABASE_URL` environment variable with the connection URL for your MongoDB instance. It will look something like this:

```bat
DATABASE_URL="mongodb+srv://username:pass@dblocation/myFirstDatabase?retryWrites=true&w=majority"
```

When this is set you can now run the Prisma code generator. The Prisma schema that we have used for this application, signifies to the Prisma ORM that we would like to create a collection of Post documents with the fields and connections as shown below:

```
model Post {
 id          String   @id @default(dbgenerated()) @map("_id") @db.ObjectId
 createdAt   DateTime @default(now())
 title       String
 body        String?
 views       Int      @default(0)
 author      String
 authorEmail String

 @@unique([authorEmail, title])
}
```

Prisma provides a [multitude of helpers](https://www.prisma.io/docs/concepts/components/prisma-schema) to apply on your data model definition which you can use to describe relationships, set constraints and configure attribute types. All that configuration is in code, making it a much more familiar environment for application developers with zero amount of boilerplate.

To generate the TypeScript API for accessing this model, inside the repository, execute the `npm run schema:generate` command. This will create all the required types and APIs to use your MongoDB Posts collection which you can import directly from the `@prisma/client` package. You can use the types both for the entities and the database operations, as shown in the `types/index.ts` file.

### Use Prisma Studio to add a few posts

Another great tool from the Prisma team is Prisma Studio. Prisma Studio gives you a visual data editor with direct access to your database.

![Clerk Prisma Mongodb Fullstack Post App tutorial illustration](./2772efaeae7e205dfabdcfa7a9720803766978b8-1999x438.png)

For this example you can add a couple of posts or more with the `authorEmail` attribute matching the email address with which you will sign up for the app.

## How Clerk provides authenticated access to your data

For the frontend part of our example, `@clerk/nextjs` provides access to the Clerk pre-built components and helpers to enhance your application with user authentication, as quickly and intuitively as possible. Below we will show some of the code snippets that guarantee user authenticated behaviours.

### Only allow interface actions to specific users

Our users should be able to delete only their own posts and capability should be as intuitive as possible on the interface level. To achieve this, we include a deletion button on our post cards, only visible to users which are signed in and their email matches the author of the post.

```tsx
function PostCard({ deletePost }) {
  /** Clerk hook */
  const user = useUser()
  /** Get the user email address */
  const primaryEmailAddress = user.primaryEmailAddress?.emailAddress

  return (
    <CardLayout>
      {/* ... */}
      {primaryEmailAddress === post.authorEmail && (
        <Image
          cursor="pointer"
          onClick={async () => await deletePost(post.id)}
          boxSize="20px"
          alt="delete"
          src="/images/trash.png"
        />
      )}
      {/* ... */}
    </CardLayout>
  )
}
```

As you can see, just by using the `useUser` hook from the Clerk package, we are able to get all the required properties for the signed in user, and achieve the functionality we described.

### Authenticated access to Prisma models

To safeguard your data from unauthenticated access and unauthorized operations directly at the  Prisma model API, you only need to add a thin middleware layer on top of the data model access code. This middleware for our application, will use the `@clerk/nextjs/api` in the API routes to determine the authentication status and recognize the signed in user.

```typescript
async function handler(req: RequireSessionProp<NextApiRequest>, res: NextApiResponse) {
  /** On how this works visit https://nextjs.org/docs/api-routes/dynamic-api-routes */
  const postId = req.query.id as string

  /**
   * For this example, we want to identify the email of the person trying to modify some post.
   * We do this through the Clerk cookie ;)
   */
  const primaryEmailAddress = await getClerkUserPrimaryEmail(req.session.userId as string)

  /** We check if the persisted post email matches the requesters. */
  const persistedPost = await getPostById(postId)

  if (primaryEmailAddress !== persistedPost?.authorEmail) {
    /** If it does not match, he will get a 401 */
    res.status(401).end()
  }

  switch (req.method) {
    case 'PUT':
      /** The client will send the post object in the PUT request body. */
      const modifiedPost = req.body
      const updatedPost = await updatePost(postId, modifiedPost)

      res.status(200).json(updatedPost)
      break
    case 'DELETE':
      await deletePost(postId)
      res.status(200).json({ completed: true })
      break
    default:
      res.status(405).end()
      break
  }
}

export default requireSession(handler)
```

The requireSession helper guarantees that an authenticated user is accessing the endpoint, and also populates the `req.session` attribute on the request object coming from Next.js.

In this endpoint, we retrieve the primary email address of the authenticated user and compare it with the author of the post to be deleted or updated. For the sake of the example, we only check for the primary email address of the user, but since Clerk also supports multiple email addresses per account, you could adjust the logic accordingly.

## Wrapping up

This showcase application demonstrates how, with little effort, you can add authentication and authorization to both the frontend and the backend layers using Clerk and Prisma. Prisma has proved to be an excellent addition to an engineer’s arsenal, especially when it comes to simplicity, productivity and type safety. Folks at Prisma have done an excellent job listening to community feedback, adding new features and solidifying their place as one of the top ORMs out there.

At Clerk we strongly believe that you as an engineer should not have to spend so much time and effort building and maintaining authentication workflows. Authentication, user management and security are hard, and we focus exclusively on giving you the best in class solution. All this so you can focus on what really matters, which is realizing the idea that makes your product unique.

If you have any feedback, are running into trouble, or just want to share what you've built - we'd love to hear from you! Reach out to us on X [@clerk](https://x.com/clerk), on our [Discord community](https://clerk.com/discord), or through any of our other [support channels](https://clerk.com/contact/support).

---

# Serverless authentication with Clerk and Firebase
URL: https://clerk.com/blog/serverless-auth-with-clerk-and-firebase.md
Date: 2021-07-30
Category: Guides
Description: Protect your Firebase Cloud Functions with user authentication using Clerk.

As modern ventures have a need for architectures and infrastructure that support constant innovation and dynamism, development agility and convenience must be at their core. One of the computing categories that support this paradigm and has solidified its place on our engineering efforts is *Function as a service* (FaaS).

A leading product in this space is Firebase and its [Cloud Functions](https://firebase.google.com/docs/functions) solution. Cloud Functions give you all the power of a serverless framework with both callable and event-driven architectural capabilities.

In this article we are going to show you how to secure your Cloud Functions in an easy and seamless way using Clerk, making sure only authenticated Firebase user clients can access the results of your serverless functions. To do that, we are going to be using the Firebase [web SDK](https://firebase.google.com/docs/web/setup?sdk_version=v8) and the latest Firebase [Callable Functions](https://firebase.google.com/docs/functions/callable).

The Clerk-Firebase integration is **natively** authenticating a user as a Firebase authenticated user, recognized by both systems. This fact provides tremendous flexibility without going through any backend code or calling *yet another API* to continuously verify with both platforms. You as a web developer do not have to do **anything** additional for authentication to work the same way as it would with a standard Firebase authentication provider.

## Prerequisites

This article assumes that you have already:

1. Set up a Firebase Web project with the ability to use [Cloud Functions](https://firebase.google.com/docs/functions/get-started)
2. Correctly set up the [Firebase integration](/docs/integrations/databases/firebase) on your Clerk account

If you need a refresher with an example of the whole process, you can check out our showcase of [how to integrate Firebase with Clerk](/blog/build-a-premium-recipes-app-clerk-firebase).

## Creating and Securing your Function

For the sake of the example, we are going to create a function which receives a message from the Firebase web SDK and returns the message with the user identifier attached. A pretty trivial example but it showcases how to configure your Functions to only be accessible by your authenticated users.

```typescript
import * as functions from 'firebase-functions'

export const returnAuthenticatedMessage = functions.https.onCall((data, context) => {
  /** Prevent unauthenticated Firebase users from receiving the result. */
  if (!context.auth) {
    throw new functions.https.HttpsError(
      'unauthenticated',
      'The function must be called while authenticated',
    )
  }

  /** Any kind of data parameter sent from the web client. */
  const text = data.text

  /** Authentication / user information is automatically added to the request through context. */
  const clerkFirebaseUserId = context.auth?.uid

  return {
    message: `Authenticated message '${text}' from user ${clerkFirebaseUserId}.`,
  }
})
```

What this function does is first of all check if the request is coming from an authenticated user, *Firebase callable functions store this information in the context argument*, and if the user is not authenticated, a self-explanatory error is returned. If all goes well, the message is returned, along with the user identifier.

As you can see, there are no external calls on any Clerk related API. The user is **automatically recognized** as being authenticated and also shares the same user identifier in both Clerk and Firebase.

## Invoking the Function from the client

The second part of the equation is to call the function from your client application using the Firebase web SDK.

In your application, after you successfully sign in using the[ Clerk-Firebase integration](/docs/integration/firebase), you can normally call the Cloud Function from your client code.

```typescript
try {
  const returnAuthenticatedMessage = firebase
    .functions()
    .httpsCallable('returnAuthenticatedMessage')

  const response = await returnAuthenticatedMessage({
    text: 'some message',
  })

  /**  Read the result of the Firebase Function. */
  const authenticatedMessage = response.data.text
  // ...
} catch (error) {
  /**  Get the Error details. */
  const code = error.code
  const message = error.message
  const details = error.details
  /** Handle the error in any way you want. */
}
```

That's it! Using the Clerk-Firebase integration, user authentication works native to Firebase, while also providing consistency between user identifiers.

## How does this work ?

The way Clerk integrates with Firebase, authentication is ensured through a token representing a valid Firebase user. This token is retrieved through the Clerk JavaScript library and then handled internally by the Firebase web SDK.

The SDK then automatically attaches the required authentication token on the *HTTP Authorization* header. From there the Firebase platform can provide any user credentials on the `context` object in the callable Firebase Function.

![How does this work ? screenshot](./377971a37ee2b38b6ce0738418a8fcc1f6c6fa4d-774x384.jpg "Low-level abstraction by the Firebase web SDK")

## Parting Words

This brief example showed how you can authenticate your Firebase serverless Functions while using Clerk for authentication. There are no extra steps compared to using Firebase's standard authentication system, but you get all of the benefits of Clerk's best-in-class user management system, including beautiful UIs and a complete user profile page.

We would love to hear your feedback and use cases for integrating Clerk and Firebase. If you have questions or ideas for improvement, reach out to us on X [@clerk](https://x.com/clerk), or through any of our [support channels](https://clerk.com/contact/support). We also have a [Discord server](https://clerk.com/discord) and we would love to see you there. Cheers!

---

# Row-level access for your Airtable-powered application with Clerk
URL: https://clerk.com/blog/row-level-access-for-your-airtable-powered-application.md
Date: 2021-07-17
Category: Guides
Description: Learn how to add complete user authenticated access to your Airtable data API using Clerk.

Airtable is an online platform to access, manage, and collaborate on relational or spreadsheet-like information. The folks at Airtable have done an amazing job on both the user experience and the technical aspects of the product. As a no-code tool – for most use cases – it can help with your whole team’s efficiency around data management.

Airtable is a great choice as a database for any kind of resource you want to serve in an application, but lacks the granular access management capabilities that most web applications need.

As an example, consider an apartment hunting application where realtors need to add and manage the most attractive apartments for each of their clients. Each apartment will be listed in a single table, and you need to make sure that clients can only access the apartments selected for them. To achieve that, we can leverage some Clerk magic to provide **authenticated user access** to only certain rows in your Airtable apartment hunt database.

## Setup for the Apartment Hunt

To kickstart the apartment hunt project, you can start by creating your Airtable account and then use the [Apartment Hunting Template](https://airtable.com/templates/everyday-life/expPfTzGnfpwjgWlS/apartment-hunting) from the template gallery.

![Row Level Access For Your Airtable Powered Application tutorial illustration](./abca3d93141f8442e077610f4b14c9afd905e040-705x599.png)

In the created dataset you will need to add a column that represents the email that the Apartment has been assigned to. Go ahead and create the Email column of type *“Email”.*

![Row Level Access For Your Airtable Powered Application tutorial illustration](./d17297b7d9f1d68ad2d14e5bc2a6ee9916bf987c-1284x423.png)

*Setting the column's type to Email adds more capabilities to the field, including validation that the email address is valid.*

For the sake of our example, you can go ahead and fill the Email column with the email address you will use to access your Apartment Hunting application. For me, it's *[peter@clerk.com](mailto:peter@clerk.com)*.

## Create a Clerk application

If you are new to Clerk you will need to [create an account](https://dashboard.clerk.com/sign-up) on our platform, then follow the steps to create a new application.

After you create an account and a new application for this example, you can move on to the repository setup.

## Show me the code

To run the full example locally, you will need to follow a few small steps. First, go ahead and clone the example application.

```sh
git clone https://github.com/clerkinc/clerk-airtable-apartment-hunt.git
```

Go inside your project folder and copy the `.env.example` file to a `.env.local` file.

```sh
cp .env.example .env.local
```

#### Clerk Environment Variables

You will need the Frontend API value which can be found on the [dashboard](https://dashboard.clerk.com) on your development instance's home page. Set this value as the `NEXT_PUBLIC_CLERK_FRONTEND_API`.

Next you will need the Clerk API key which can also be found on your dashboard under Settings ➜ API keys. Add that as `CLERK_API_KEY` in your .env.local file.

#### Airtable Environment Variables

For Airtable you need to go to the Airtable [account page](https://airtable.com/account) to generate an API key and retrieve your base key. The base key can be found after selecting the newly created database on the [API page](https://airtable.com/api). These variables should be set as `AIRTABLE_API_KEY` and `AIRTABLE_BASE_ID` respectively.

Finally your .env.local file should look something like:

```text
AIRTABLE_API_KEY=keyojbaeZ5KBe9JMR
AIRTABLE_BASE_ID=appBMXDYAGWAgvH8S
NEXT_PUBLIC_CLERK_FRONTEND_API=clerk.2ct1o.leet.lcl.dev
CLERK_API_KEY=test_avDIYjpk0SqaTGF1Wx8MdrEHZIkg2zSObU
```

Now you just need to install the project dependencies with `yarn install` inside the project folder, then `yarn dev` to start the application locally.

## How Clerk provides authenticated access to your data

To authorize Airtable data access with Clerk, we introduce a thin and customizable access management layer over the Airtable API in our backend.\*

*\*The Airtable Rest API does not restrict us from calling it directly from the browser, but it is not recommended since we would need expose sensitive information. For more information, please see [this community forum answer](https://community.airtable.com/t/can-i-use-the-airtable-api-securely-from-the-browser/28810).*

In the Apartment Hunting application, `@clerk/nextjs` takes care of the frontend of user authentication. For apartment data access, we use Next.js API routes to interact with the Airtable API in a secure manner. These routes use `@clerk/nextjs/api` to determine the signed in user.

### Only showing apartments assigned to the current user

To make sure users only have access to the properties assigned to them, we create a `/api/apartments` endpoint to fetch this information. The code for this endpoint can be seen below:

```typescript
async function handler(req: WithSessionProp<NextApiRequest>, res: NextApiResponse) {
  switch (req.method) {
    case 'GET':
      /**
       * Get the user email from the userId attached on the request.
       */
      const userId = req.session?.userId as string
      const user = await ClerkInstance.users.getUser(userId)
      const primaryEmailAddress =
        user.emailAddresses.find((emailAddress) => emailAddress.id === user.primaryEmailAddressId)
          ?.emailAddress || ''

      /** Use the email to retrieve the assigned apartments. */
      const apartments = await getApartmentsByEmail(primaryEmailAddress)
      res.status(200).json(apartments)
      break
    default:
      res.status(405).end()
  }
}

/**
 * Only allow authenticated access or respond with status code 403 Forbidden.
 * Add the req.session attribute on the NextApiRequest object
 */
export default requireSession(handler)
```

The `requireSession` helper guarantees that an authenticated user is accessing the endpoint, and also populates `req.session` attribute on the request object coming from Next.js.

In this endpoint, we retrieve the primary email address of the authenticated user and use it to fetch only apartments assigned to this email. Here, we only check for the primary email address of the user, but since Clerk also supports multiple email addresses per account, you could adjust the logic accordingly.

### Only allow assigned users to modify the apartment status

In a similar manner, we want to restrict editing the apartment status to only the assigned user. The logic for restricting that access can be seen below:

```typescript
async function handler(req: WithSessionProp<NextApiRequest>, res: NextApiResponse) {
  switch (req.method) {
    case 'PUT':
      const apartment = req.body
      const userId = req.session?.userId as string

      /** We make sure prevent a user with different account to update the visitation status. */
      const user = await ClerkInstance.users.getUser(userId)
      const primaryEmailAddress = user.emailAddresses.find(
        (emailAddress) => emailAddress.id === user.primaryEmailAddressId,
      )?.emailAddress

      /** We check if the persisted apartment email matches the requesters. */
      const persistedApartment = await getApartmentById(apartment.id)

      /** If the emails do not match, return 401 Unauthorized */
      if (primaryEmailAddress !== persistedApartment.fields.Email) {
        res.status(401).end()
        break
      }

      const results = await updateApartment(apartment)
      res.status(200).json(results)
      break
    default:
      res.status(405).end()
      break
  }
}

export default requireSession(handler)
```

In the same manner as the apartment fetch, we only allow authenticated access by using the `requireSession` middleware. We perform an extra check with the signed in user's email address to ensure they are assigned to the apartment.

## In summary

This was just a simple example of how Clerk can be used to add row-level access an to application that uses Airtable as it's database. While we built this example, we were really impressed with how powerful Airtable can be at managing project data, with little to no code involved.

In the same manner, Clerk abstracts away the intricacies of authentication and user management, allowing a robust solution to be deployed with little code, and users to managed with no code through our dashboard.

If you have any feedback, are running into trouble, or just want to share what you've built - we'd love to hear from you! Reach out to us on X [@clerk](https://x.com/clerk), on our [Discord community](https://clerk.com/discord), or through any of our [support channels](https://clerk.com/contact/support).

---

# Build a premium recipes app with Clerk and Firebase
URL: https://clerk.com/blog/build-a-premium-recipes-app-clerk-firebase.md
Date: 2021-07-10
Category: Guides
Description: Learn how to connect Clerk as an authentication and user management solution together with your Firebase as your backend.

Firebase is among the top Platform-as-a-Service (*PaaS*) providers for web and mobile applications. It packs tons of powerful and well designed features for developers to spin up a fully fledged application with minimal effort, like storage, analytics, and authentication.

Clerk integrates directly with Firebase, so developers can easily add our beautiful Sign Up, Sign In, and User Profile UIs to their Firebase application. The integration allows developers to use all the full feature set of Firebase without compromising on user management.

In this post, we are going to show you a full example integrating Clerk with Firebase, to make a "premium" recipe showcase application. The recipe data is going to be stored in Firebase Firestore and will only be available to authenticated users.

![Premium recipes app hero UI with Clerk and Firebase](./359e8539774d761e686f5eb611472e72efcc59bf-1131x701.png)

The full code for this guide is available in the [clerk-firebase-starter repository](https://github.com/clerkinc/clerk-firebase-starter), and includes instructions for how to set up Firebase and connect it to Clerk. The application demo is live at [https://fir-clerk.web.app/](https://fir-clerk.web.app).

If you would like to read the documentation before getting started, please refer to our Firebase integration documentation.

## Setting up the Firebase project

To start off, we need a Firebase Web project. Go to the [Firebase Console](https://console.firebase.google.com) and create a new project:

![Create Firebase project in Firebase Console screenshot](./94736e4366e190ee7431337ce1104c1ae5812333-333x236.png)

After giving it a valid name and confirming, you will find yourself in the Firebase dashboard.

## Enabling Firestore and adding recipes

From the Firebase dashboard, you can go ahead and create a new Firestore Database for our example project. The Firestore instance will serve as our database where we will store and retrieve our recipes. If you want to learn more about Firestore, you can take a look at the starter [documentation](https://firebase.google.com/docs/firestore).

During the database instance creation, you should choose the storage location somewhere close to your users. Also keep in mind that by selecting the production mode ruleset, by default you have disabled any reads/writes to your database from outside the platform. We are gonna change that right after!

If you are not familiar with Firebase [Security Rules](https://firebase.google.com/docs/rules), they are basically a Domain-specific language to limit the access to important data in Firebase storage solutions. As we mentioned previously, since these are premium recipes, only authenticated users will be allowed to view them.

To allow authenticated users to read any database but not write, you can use the security rule shown below:

```text
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if request.auth != null;
    }
  }
}
```

## Adding recipes

To add a few recipes, go ahead and create a `recipes` collection with recipes of your liking, but please conform to the same attribute schema shown below:

![Firestore recipes collection document schema screenshot](./749dbbe0c48ae8b85e95e44fb25d6509122cd722-1256x524.png)

If it's helpful, here is the TypeScript type for each recipe document:

```typescript
type Recipe = {
  /** The recipe description */
  description: string

  /** The amount of guilty you should feel */
  calories: number

  /** Cooking time in minutes */
  cookingTimeMin: number

  /** Publicly accessible image full URL */
  imageUrl: string

  /** Number of ingredients needed */
  ingredientsNum: number

  /** The title of the recipe */
  title: string
}
```

After adding a few recipes, you are all set from the data side.

## Enabling Firebase Authentication

Since this is a new project, you will need to enable the Authentication feature. No further action is needed, since Clerk will handle the rest.

![Enable Firebase Authentication feature screenshot](./05531358eaa7d8152a46ee80bb1e9734ca10e810-1438x482.png)

## Enabling the Firebase integration on Clerk

If you are new to Clerk you will need to [create an account](https://dashboard.clerk.com/sign-up) on our platform, then follow the steps to create a new application.

After you create an account and a new application for this example, you can follow [these instructions](/docs/integration/firebase) to enable the Firebase integration on Clerk for your application instance.

With that done, you are now able to authenticate Clerk users in your Firebase application.

## Show me the code

To run the full example locally, you will need to follow a few small steps. First, go ahead and clone our Firebase starter application.

```sh
git clone git@github.com:clerkinc/clerk-firebase-starter.git
```

Go inside your project folder and copy the .env.example file into a .env.local file.

```sh
cp .env.example .env.local
```

Take the Frontend API value which can be found on your [application dashboard](https://dashboard.clerk.com) and add it as the `NEXT_PUBLIC_CLERK_FRONTEND_API` value. Your .env.local file should look something like:

```text
NEXT_PUBLIC_CLERK_FRONTEND_API=clerk.sample.api.lcl.dev
```

The final configuration step is to replace the firebase.web.ts config file with one from your own Firebase project. You can find a specification for the [config object](https://firebase.google.com/docs/web/setup?sdk_version=v8#config-object) in Firebase's documentation.

After you create new Firebase Web project, you will be able to find the required values under Project settings ➜ General.

![Firebase web app configuration settings screenshot](./874f36e6473bd7a22559394ceb65bd9cbed15c8a-936x720.png)

Now you are ready to install the dependencies and run your project in development mode. Go to the root directory of the project and run:

```sh
yarn install
```

and after completion

```sh
yarn dev
```

Your application is now running in your local environment and you can experience the same functionality as the live demo.

## Where the magic happens

If you take away the application setup, the integration is seamless and works out of the box with just a few *copy & paste* steps across Clerk and Firebase. Here's how it works:

Let us go over the way the integration works in your web application code and what are the actions you need to authenticate a Firebase user with Clerk.

The `firebase` application object houses the `.auth()` namespace which includes methods to authenticate a user. One of those methods is `signInWithCustomToken`, which allows third-party providers like Clerk to pass authenticated user data to Firebase.

*Where does this "custom token" come from ?*

After setting up Firebase integration on Clerk, you can retrieve the necessary "custom token" by calling the `getToken` method on the Clerk User object.

Combined, it's just two lines of code:

```typescript
const firebaseToken = await clerkUser.getToken('firebase')
await firebase.auth().signInWithCustomToken(firebaseToken)
```

From that point on, your user is authenticated and can complete all the actions that require privileges of an identified Firebase user.

You can see this in action in our [useRecipes](https://github.com/clerkinc/clerk-firebase-starter/blob/main/client/hooks/useRecipes.ts) hook implementation. If you remove these two lines, the request will fail since the Clerk user will not also be authenticated in Firebase. (*Remember, we set a Security Rule - `allow read: if request.auth != null;` - which restricts access to authenticated users.)*

## Moving forward

This end to end example showed how you can use Clerk and Firebase together for a new web project. Firebase is an exceptional development platform and we are really excited to see what you build with this integration.

If you have any feedback, and running into trouble, or just want to share what you've built - we'd love to hear from you! Reach out to us on X [@clerk](https://x.com/clerk), on our [Discord community](https://clerk.com/discord), or through any of our [support channels](https://clerk.com/contact/support).

---

# Build a to-do app with Clerk and Hasura— and no backend code
URL: https://clerk.com/blog/build-a-to-do-app-with-clerk-and-hasura-and-no-backend-code.md
Date: 2021-05-27
Category: Guides
Description: Learn to build a to-do app using Clerk for authentication, Hasura for data storage and access, and Next.js for the frontend.

This guide is outdated. For a more up-to-date tutorial, check out [Build a Cookie Clicker App with Clerk and
Hasura](/tutorials/build-a-cookie-clicker-app-with-clerk-and-hasura).

## Introduction

While traditional applications require both frontend and backend developers, new technologies like Clerk and Hasura are making it possible to build robust backends without writing backend code.

In this tutorial, we'll leverage these new technologies to build a simple to-do list application without writing any backend code. The primary tools we'll use are:

- [Hasura Cloud](https://hasura.io/cloud), for creating a frontend-accessible GraphQL API
- [Heroku Postgres](https://www.heroku.com/postgres), for storing to-do list data
- [Clerk](https://dashboard.clerk.com/sign-up), for authentication
- [Next.js](https://nextjs.org), for frontend development
- [Tailwind CSS](https://tailwindcss.com), for styling

Before we get started, you can see the final result here:

- [Demo of the to-do app](https://clerk-hasura-todos-zeta.vercel.app)
- [Completed codebase](https://github.com/nachoiacovino/clerk-hasura-todos)

Let's begin!

### Create a Hasura project

Start by [signing up for Hasura Cloud](https://hasura.io/cloud).

If you already have a Hasura Cloud account, you will need to manually create a New Project. If this is your first time, a new project will automatically be created for you.

After your project initializes, you will see something like this (with a different name), go ahead and click the cog wheel to go to the project settings:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./9083441a012c0cff18e6ba1144c537db356951d5-842x253.png)

From here, you will need our project's GraphQL API URL. Please copy it, you will need it in a second:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./871909e71d7ce6afe01b48440352579a74254c45-915x729.png)

### Deploy the starter project

We prepared a starter project for this tutorial, the easiest way to get started is with the following "Deploy" button. The button will prompt you through cloning the repo, initializing Clerk, and deploying the app live on Vercel. The starter project uses Next.js, Tailwind CSS and Clerk. It's already setup with some styles using Next.js and Tailwind CSS but you don't have to be proficient in either of these to follow the tutorial.

This button will first prompt you to create a Vercel account if you do not have one. When signing up, Vercel may ask you to grant access to all of your repositories or just selected ones - feel free to choose either option.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./03e4ba61a5b5aff2fd3effd485f4d12835f64756-659x481.png)

The Next step will prompt you to integrate Clerk into your project, click **Install.**

If you do not have a Clerk account already, you will be asked to create one now.

Next, you will be asked to select an application name and a brand color. Then, click **"Create application"**:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./2afb0a154750312a1938002fb3b8e170356cbce1-800x599.png)

After the window closes, click Continue and you will be prompted to pick a Git provider. In this tutorial, we will use **GitHub:**

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./d43be00e7a7e9af7089ac464e0f6b4130a0fa79c-656x477.png)

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./1dbf12f443839f6e57f82e894d520b8e98c0962d-657x481.png)

This is where you will use Hasura Cloud's **GraphQL API** URL you copied earlier. Add it below and click **Deploy**.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./cb34702cda69ba093dce6c2eb9f9f891c9517c2e-663x742.png)

While you wait for Vercel to deploy our project, you can move to GitHub, where Vercel has created a new repository on your behalf. Go ahead and clone it locally.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./cd9946c2d21a8e8f86dcd58b81ab6b3d1b53bf20-1244x771.png)

To clone, go to your desired folder, open a terminal and paste:

```bat
git clone <repository-url>
```

Then, go inside the project folder and run:

```bat
yarn
// or
npm install
```

This will install the necessary dependencies.

After this, go ahead and launch your project:

```bat
yarn dev
// or
npm run dev
```

If you haven’t previously used Vercel on your computer, you will be asked to sign in when you launch the project.

You will be prompted to set up link this local project with the Vercel project. Respond \***\*Y\*\*** to each prompt.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./8fc953112b70f944728a7da4790fedcc9fc8425a-760x347.png)

Then, you will see your project running on [http://localhost:3000](http://localhost:3000).

### File structure

```bat
├── components
│   ├── AddTodo.js (Form to Add todo)
│   ├── Header.js (Header of our app with UserButton)
│   ├── Layout.js
│   ├── SingleTodo.js (One todo with toggle/delete methods)
│   └── TodoList.js (List to render all todos with get method)
├── lib
│   └── apolloClient.js (Apollo configuration wrapper)
├── pages
│   ├── sign-in (Clerk-powered sign in page)
│   │   └── [[...index]].js
│   ├── sign-up (Clerk-powered sign up page)
│   │   └── [[...index]].js
│   ├── user (Clerk-powered user profile page)
│   │   └── [[...index]].js
│   ├── _app.js (where Clerk is configured)
│   ├── index.js (first page you see)
│   └── todos.js (page we will work on)
├── public (images)
├── styles (all css styles for our app)
│   ├── globals.css
│   ├── Header.module.css
│   └── Home.module.css
├── .env.local (environmental variables pulled from Vercel)
├── postcss.config.js (postcss config, needed for Tailwind)
├── package.json (where your packages live)
├── README.md
├── tailwind.config.js
└── yarn.lock
```

### Activate Hasura integration

Hasura is one of the integrations that Clerk offers, with many more coming the future. To use it, you need to enable it. Go to your [Clerk dashboard](https://dashboard.clerk.com), click on your application -> Development -> Integrations and activate Hasura.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./8b8f6731437b043e67dc633131e6818c1ad4ac0e-1043x319.png)

Before leaving the dashboard, go to Home and copy your Frontend API, you'll need to to create the link between Clerk and Hasura.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./9386188495ad4b6f061a00364f397295fe6ed8f0-1046x454.png)

With your project already running, it's time to go back to Hasura and start setting up the database.

## Set up Hasura Cloud

Go back to Hasura, click the cog wheel, click **"Env vars"** and then **"New Env Var"**.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./6e87e29874cfedabb12fa0f18dd7bdb8243929bf-1144x556.png)

Pick HASURA\_GRAPHQL\_JWT\_SECRET from the list and then add this, replacing **%FRONTEND\_API%** with the Frontend API you copied from Clerk.

```bat
{"jwk_url":"https://%FRONTEND_API%/v1/.well-known/jwks.json"}
```

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./1b8ffd6da9dd20b504f25ef5f5f8edaad0ccb2e6-527x461.png)

Click "Add" and then, click "Launch Console".

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./1c5c860f88e543bcca4bc0326ca10d7ba5657bbd-1142x455.png)

This will bring us to GraphiQL. GraphiQL is the GraphQL integrated development environment (IDE). It's a powerful tool you can use to interact with the API.

After GraphiQL opens, the first thing you need to do is to create a table. Start by clicking Data on the top navbar:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./235d8400a644434f2a5e1f611f1dac4c48863ef7-1920x947.png)

For this tutorial, we recommend creating a Heroku database for free:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./1d96a16745ba10676e89944599b6ceadadef008e-792x331.png)

If you don't have a Heroku account, now is the time to create one.

Follow the steps and the database will automatically be created and linked for you.

After the database is created, click **"Public"** and then **"Create Table"**

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./8698910f66341bfe6c355d84552a113a6b0867b0-681x478.png)

Fill the table like this and **"Add Table"**.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./51f8cd6e28ac4ac497ae5ddc56426b0acfb31e66-1007x645.png)

This not only creates our table, but also triggers Hasura to create a GraphQL backend.

After creating the table, the next step is to restrict who can access the data. By default, Hasura is configured for all fields to be public. You need to set permissions and fix that.

### Set table permissions

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./592153500640383cd960b95b03667109bfbac9a6-609x191.png)

You need to create a new role called "user" and edit each of the four possible permissions they have. If you are familiar with **CRUD** (Create, Read, Update, Delete), this is basically the same thing.

### Insert (Create)

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./bbc6ae94e0cc9ed1f528850126775f134b3780d7-1243x811.png)

For **Insert** permissions, choose that the user can only set the `title` of a to-do when a new one is created. There others all have default values:

- `id` is autogenerated (set during table creation)
- `completed` starts as `false`
- `created_at` is autogenerated to `now()` (set during table creation)
- `user_id` is set to the requesting user's ID

Since the `user_id` is dependent on the particular request, it must be configured as a "Column preset."Set it to `X-Hasura-User-Id` from the "session variable."

When you use Clerk's Hasura integration, `X-Hasura-User-ID` is automatically set in the session variable that gets sent to Hasura. The code to retrieve the session variable and send it to Hasura is in `lib/apolloClient.js`.

### Select (Read)

For **Select** permissions, you want to configure Hasura so users can only read their own to-dos. You can verify this by "checking" if the to-do's `user_id` is the same as the `X-Hasura-User-Id` you receive from the session variable.

If the user ID's match, you can grant read permissions to every column. The exact configuration required is below:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./4835557a24bb810db6c74ac78a1e5107f0779e50-583x715.png)

### Update

For **Update** permissions, you want to include the same "check" as **Select**, to ensure that a user can only update their own to-dos.

However, if the check is valid, you don't want the user to have permission to update every column. Instead, only grant permission to update the `completed` column.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./16fc8d112053b024ddd9f20218aea292ddbd350f-560x758.png)

### Delete

For **Delete** permissions, you want to include the same "check" as **Select**, to ensure that a user can only delete their own to-dos.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./cdfcf7790ce2e6d07238c23aad1e6695da0c5139-538x425.png)

That's all of the permissions we need to set! Now, let's work on the frontend.

## Connect Hasura to the Frontend

Go to [http://localhost:3000](http://localhost:3000) and create an account on your app. Then, click **"Start saving your todos"** and you will see this:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./c18fe60869e319bd82bcb6e8f3e72e3125fcf3d7-485x316.png)

These is sample data and is still static. In the next steps of the tutorial, we will connect this list to Hasura and your database, so users can create and manage their own to-dos.

### Create a to-do

The first step is giving users the ability to create a to-do. We will do this from `components/AddTodo.js`.

If you look at the `onSubmit` function, you will see that nothing will currently happen when the user clicks add. You must create a GraphQL "mutation" to update the database when add is clicked.

Replace the top of your file (everything above the return statement) with this code:

```jsx {{ prettier: false }}
import { gql, useMutation } from '@apollo/client'
import { useState } from 'react'

const ADD_TODO = gql`
  mutation AddTodo($title: String!) {
    insert_todos_one(object: { title: $title }) {
      id
      title
    }
  }
`;

const AddTodo = () => {
  const [title, setTitle] = useState("");
  const [addTodo] = useMutation(ADD_TODO, {
    onCompleted: () => setTitle(""),
  });

  const onSubmit = (e) => {
    e.preventDefault();
    addTodo({
      variables: { title },
    });
  };

  return (...
```

This mutation accepts a title and passes it to the `insert_todos_one` method that Hasura has created for us.

Now, let's go back to our frontend and try adding a todo.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./5ca789e007ad71c91b663402b4dc6619f5ad81c6-430x108.png)

You'll see notice that nothing happens on the frontend, and that's expected because we're still reading static to-dos. But, let's check the database to see if the mutation succeeded. Go back to the Hasura Cloud Console, copy and paste the following query and click the play button:

```graphql
query GetTodos {
  todos {
    id
    title
    user_id
    created_at
    completed
  }
}
```

You should see your todo was created successfully:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./6a24c4a662abb8aca62498b14c6de56890aedfcf-953x384.png)

### Fetch to-dos

Now, we will update the frontend to read the user's to-dos from Hasura. You can do this from `components/TodoList.js`.

The file starts by showing static data. Update the component to instead run a GraphQL "query":

```jsx
import { gql, useQuery } from '@apollo/client'

import SingleTodo from '../components/SingleTodo'

export const GET_TODOS = gql`
  query GetTodos {
    todos(order_by: { created_at: desc }) {
      id
      title
      completed
    }
  }
`

const TodoList = () => {
  const { loading, error, data } = useQuery(GET_TODOS)

  if (loading) return 'Loading...'

  if (error) return <>{console.log(error)}</>

  return (
    <div className="overflow-hidden rounded-md bg-white shadow">
      <ul className="divide-y divide-gray-200">
        {data?.todos.map((todo) => (
          <SingleTodo key={todo.id} todo={todo} />
        ))}
      </ul>
    </div>
  )
}

export default TodoList
```

First, we created a query that gets all to-dos (remember, the user can only see the ones attached to their own `user_id`). We set the query to return `id`, `title`, and `completed`. We order the to-dos by `created_at` descending, so the newest are first in the list.

`useQuery` returns an object so you can render different things depending on if the data is loading, if there's an error, or if the data has been retrieved.

We've configured an early return while the data is loading or if there's an error, then render the list if that is available. After saving, you should see something like this:

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./5a80afdca9917e3ec1fb8fdcb49e8bd086b23ab1-268x178.png)

Let's try adding a new todo.

![Build A To Do App With Clerk And Hasura And No Backend Code guide illustration](./85f7ac27b6b73c4343812e4a42fae99dabdc79a2-304x189.png)

You should see that the form clears after clicking "Add", but the list below doesn't automatically update. However, if you manually refresh the page, you will see new to-do.

That's not the best experience and we will fix this later by implementing a cache, so your can keep your database and your frontend in sync.

Before that, let's implement toggle and delete mutations.

### Delete Todo

Open `components/SingleTodo.js`, which is the component the renders for each individual to-do.

Update the code to add a delete mutation when the delete button is clicked:

```jsx {{ prettier: false }}
import { gql, useMutation } from '@apollo/client'
import { GET_TODOS } from './TodoList'

const DELETE_TODO = gql`
  mutation DeleteTodo($id: uuid!) {
    delete_todos_by_pk(id: $id) {
      id
      title
    }
  }
`

const SingleTodo = ({ todo }) => {
  const [deleteTodoMutation] = useMutation(DELETE_TODO)

  const deleteTodo = () => {
    deleteTodoMutation({
      variables: { id: todo.id },
    })
  }

  // rest of the code
```

Now, try deleting a todo. It works, but you get same experience as inserting. You need to refresh the page to see it.

We will fix this shortly, but first let's add toggle functionality.

### Toggle Todo

Still inside `components/SingleTodo.js`, now you can add a new toggle mutation. Here is the updated component with both delete and toggle functionality:

```jsx
import { gql, useMutation } from '@apollo/client'
import { TrashIcon } from '@heroicons/react/solid'
import { GET_TODOS } from './TodoList'

const DELETE_TODO = gql`
  mutation DeleteTodo($id: uuid!) {
    delete_todos_by_pk(id: $id) {
      id
      title
    }
  }
`

const TOGGLE_TODO = gql`
  mutation ToggleTodo($id: uuid!, $completed: Boolean!) {
    update_todos_by_pk(pk_columns: { id: $id }, _set: { completed: $completed }) {
      id
      completed
    }
  }
`

const SingleTodo = ({ todo }) => {
  const [deleteTodoMutation] = useMutation(DELETE_TODO)
  const [toggleTodoMutation] = useMutation(TOGGLE_TODO)

  const deleteTodo = () => {
    deleteTodoMutation({
      variables: { id: todo.id },
    })
  }
  const toggleTodo = () => {
    toggleTodoMutation({
      variables: { id: todo.id, completed: !todo.completed },
    })
  }

  return (
    <li key={todo.id} className="flex justify-between px-6 py-4">
      <div>
        <input
          id={todo.id}
          name="completed"
          type="checkbox"
          checked={todo.completed}
          onChange={toggleTodo}
          className="mr-3 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
        />
        <label htmlFor={todo.id} className={todo.completed ? 'text-gray-400 line-through' : ''}>
          {todo.title}
        </label>
      </div>
      <TrashIcon className="h-5 w-5 cursor-pointer text-gray-500" onClick={deleteTodo} />
    </li>
  )
}

export default SingleTodo
```

Now, every CRUD operation works. But you need still need to refresh the page to see changes. Let's fix that.

Notice we are importing `GET_TODOS`, we'll need it for the next step.

### Using Apollo Cache

The GraphQL library this tutorial uses, Apollo, implements a dynamic, local cache. Instead of reloading the full list of updates after each mutation, you can run the mutations against your local cache. Then, the to-do list on your frontend will automatically be updated.

One great feature of this cache is called the `optimisticResponse`. With this, you can assume that your GraphQL mutations will succeed and reflect the change in your frontend right away, instead of waiting for the success message from Hasura. The `optimisticResponse` is preferred for your to-do app since you're not anticipating any errors, and it results in a faster-feeling user experience.

To use the cache, you need to add the `cache` and `optimisticResponse` parameters to your mutation functions.

In your `deleteTodo` function:

```jsx
const deleteTodo = () => {
  deleteTodoMutation({
    variables: { id: todo.id },
    optimisticResponse: true,
    update: (cache) => {
      const data = cache.readQuery({ query: GET_TODOS })
      const todos = data.todos.filter(({ id }) => id !== todo.id)
      cache.writeQuery({
        query: GET_TODOS,
        data: { todos },
      })
    },
  })
}
```

In your `toggleTodo` function:

```jsx
const toggleTodo = () => {
  toggleTodoMutation({
    variables: { id: todo.id, completed: !todo.completed },
    optimisticResponse: true,
    update: (cache) => {
      const data = cache.readQuery({ query: GET_TODOS })
      const todos = data.todos.map((t) => {
        if (t.id === todo.id) {
          return { ...t, completed: !todo.completed }
        }
        return t
      })

      cache.writeQuery({
        query: GET_TODOS,
        data: { todos },
      })
    },
  })
}
```

Finally, we must leverage the cache in `components/AddTodo.js`:

At the top of the file, add:

```jsx
import { GET_TODOS } from './TodoList'
```

And update your `onSubmit` as follows:

```jsx
const onSubmit = (e) => {
  e.preventDefault()
  addTodo({
    variables: { title },
    update: (cache, { data }) => {
      const existingTodos = cache.readQuery({
        query: GET_TODOS,
      })
      cache.writeQuery({
        query: GET_TODOS,
        data: { todos: [data.insert_todos_one, ...existingTodos.todos] },
      })
    },
  })
}
```

## Final thoughts

That's it! You now have a complete to-do list using Clerk, Hasura, and Next.js - and you didn't write any backend code. It's powerful, easy to configure, and easy to scale.

If you have enjoyed this tutorial or have questions or concerns, please check our [support page](https://clerk.com/contact/support). If you prefer Twitter, feel free to contact me ([@nachoiacovino](https://twitter.com/nachoiacovino)) or Clerk ([@clerk](https://x.com/clerk)) directly.

---

# How to deploy Clerk using Vercel with one click
URL: https://clerk.com/blog/clerk-vercel-one-click-deployment.md
Date: 2021-04-11
Category: Guides
Description: If you are looking to implement Auth in the easiest way possible, this is the tutorial for you. Deploy in 5 minutes.

Hi! My name is Nacho Iacovino ([@nachoiacovino](https://twitter.com/nachoiacovino)), and I'm the Developer Advocate at Clerk. In this guide, I will teach you how to deploy Clerk using Vercel. This is the fastest and easiest way to set up a new application, complete with all the auth features provided by Clerk. In just a few minutes, you’ll create an app, deploy it, and set up your local environment.

If you prefer to follow this tutorial on video, you can [watch it here](https://www.youtube.com/watch?v=6kXKaQVv-k4).

To get started, go to [clerk.com](https://clerk.com) and sign into your account. If you don’t have an account yet, click “Get started for free” and create an account.

## Quick start

Once signed in, you’ll land your Applications page. Let's click **Create application** to create a new application.

![Quick start screenshot](./f058f4cdb1fbbc2500a4e397c49b80ad3b96d101-1920x947.webp "Starting page, here you will find a \"Create application\" button.")

When prompted, choose **Quick start with Next.js and Vercel**.

![Quick start screenshot](./b2ea95ec5f659b9e0cf2813ea7693787821c962a-631x448.webp "Two options, a standard setup and a \"Quick start with Next.js and Vercel\", we'll use this one.")

You will be directed to Vercel. Sign into your Vercel account, or create an account if you don’t have one. Choose a project name then click **Continue** to import the clerk-nextjs-starter repository.

![Quick start screenshot](./3bb14296a04f19420a8301fa163246c74db0030c-653x476.webp "Choose a project name and hit \"Continue\".")

## Install Clerk

Next, let's install the Clerk integration to connect Clerk to Vercel. When prompted, click **Install**. A new window will pop up. Follow the instructions to create a new Clerk application to connect to this Vercel project. Choose an application name and a brand color for your app. By default, the Clerk application name is the same as the Vercel project.

![Install Clerk screenshot](./f9d3d6baf359059b0a30c0bc517c9760dcaf07e3-800x599.webp "Add a Clerk application name and a brand color, and hit \"Create application\".")

Next, you will create a Git repository for your project. You can choose to use GitHub, GitLab, or BitBucket. For this tutorial, we'll use GitHub. Choose a repository name and click **Continue**.

![Install Clerk screenshot](./cf9010cc557956e8b827179a346a82207c1c1dff-651x474.webp "Create the Git repository on GitHub.")

## Deploy the project

On the Import Project screen, Clerk sets the necessary environment variables for you, so you don't have to do anything. Simply click Deploy.

![Deploy the project screenshot](./f6579e44e558e59d912581c25291814aa3bb95da-652x765.webp "Import the project and Deploy, Clerk adds the necessary Environment Variables for you")

Vercel will create and deploy the new Git repository. This step may take a few minutes. After the process is complete, you should see a congratulatory screen.

![Deploy the project screenshot](./a92b293486a2145858faef16946ceb3c9dc1efa0-841x276.webp "\"Congratulations!\" screen with a link to Visit the project.")

You can visit your deployed application by clicking Visit. You can see mine [here](https://clerk-nextjs-vercel.vercel.app)!

## Clone the project locally

The next step is to clone the newly-deployed repository to your local machine. Go to your Git provider, open the repository, and find the URL to clone the repository.

![Clone the project locally screenshot](./9f4a6980f39b251c0658287a75c4881c89928feb-1243x450.webp "GitHub page of the project so you can clone it.")

Open your local machine’s command line interface and navigate to the folder where you want to install your project, then paste the following code snippet:

```sh
git clone <repo_url>
```

Next, open the project and run `yarn install`

After the installation process completes, run `yarn dev`. This is where the magic happens!

Note: If you haven’t previously used Vercel on your local machine, you’ll have to sign in using a [link sent to your email](/blog/magic-links) before running `yarn dev`.

You will be prompted to set up link this local project with the Vercel project. Respond **Y** to each prompt.

And voilà! Your app is now running on `localhost:3000` —you can open it and see everything already working. Create an account on your app and take a minute to explore its features.

## Modify settings

Now that your app is up and running, you can configure user management and theme settings provided by Clerk at [https://dashboard.clerk.com](https://dashboard.clerk.com). Navigate to your application and choose which instance you would like to work on. Each Clerk project has 3 instances: Development, Staging, and Production. Instances are independent and do not share users or settings between them, so you can try different configurations before pushing them live.

![Modify settings illustration](./6f42dfa0338c8366a451105dfb35f885bb5a9f35-1920x947.webp "Different instances of a Clerk app. Development / Staging / Production.")

Any changes made will be applied to your project without the need to modify code or re-deploy.

![Modify settings screenshot](./2e7f92556ec64ecd2a758f07619aee73fa98190a-1920x947.webp "Some of the settings you can modify on your Clerk app.")

Try different configurations and find what works best for your application!

You can also modify theme settings to match the look and feel of Clerk components with the rest of your app.

![Modify settings screenshot](./1500da74670907ae6de28f82ae0f329b3658f917-543x861.webp "Theming options you can modify on your Clerk app.")

And that's it! You just created a new application, deployed it with Vercel, and set up your local environment. No need to mess with complex backend configurations or worry about painful security customizations.

If you run into any problems, don't hesitate to contact me! I’m here to help. Check out my profile on Twitter and DM me at [@nachoiacovino](https://twitter.com/nachoiacovino).

Any feedback is appreciated!