It is time to set up your assignment. Here, we will use the information from the previous two chapters to set-up your applications database and authentication.

💼 Assignment Download

https://classroom.github.com/a/i1Qk76el

1. Please accept the following assignment and clone it to a local folder: 
2. Run pnpm i to install all the packages
3. Run pnpm dev

The application fails to initialise telling you that you have ❌ Invalid environment variables

The definition of compulsory environment variables is stored in /src/env.js file. Check it out!

🌳 Environment Variables

1. Open the .env file in your root folder. If you do not have it, please rename .env.example file to .env
2. Modify the current environment variables providing values from the previous two chapters:
   1. DATABASE_URL  (use your connection string to conenct to Vercel database, or local database)
   2. GITHUB_CLIENT_ID (check out the previous section)
   3. GITHUB_CLIENT_SECRET (check out the previous section)
3. You also need to generate a secret for NextAuth package. You can use this website to generate one at least 10 characters long.
4. Fill out the last compulsory variable:
   1. NEXTAUTH_SECRET="your secret"

Try running pnpm dev, your application should now start!

🛡️Database Setup

We need to prepare the user model and create the new task model to handle the application data. Please open schema.prisma file in your opened project and modify the User model to look as the folliowing:

model Account {
    id                String  @id @default(cuid())
    userId            String
    type              String
    provider          String
    providerAccountId String
    refresh_token     String? // @db.Text
    access_token      String? // @db.Text
    expires_at        Int?
    token_type        String?
    scope             String?
    id_token          String? // @db.Text
    session_state     String?
    user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)

    @@unique([provider, providerAccountId])
}

Also add the following two new model at the end of the schema file:

enum Status {
    COMPLETED
    ACTIVE
}

model Task {
    id          Int      @id @default(autoincrement())
    description String
    completed   Boolean
    userId      String
    user        User     @relation(fields: [userId], references: [id])
    createdAt   DateTime @default(now())
    updatedAt   DateTime @updatedAt
}

add the new “Task” model from above. If you can not find the file use “CTRL+P” or “CMD+P” shortcut to search for this file. Once you are done, you are ready to load these changes to your database. Please run the following command in the terminal in your project folder:

pnpm db:push

In the terminal window, you should see the following message: “Your database is now in sync with your schema.” 

Could you try opening your database in a database client to see these changes? Database clients are visual tools that allow you to see your data, manipulate it, and administer your whole database server.  Concerning database clients, there are many options, let's mention a few:

1. Your project comes with pre-configured web interface for viewing DB contents. Please run pnpm db:studio in your terminal, which opens a website with your database
2. JetBrains DataGrip (is free for students)
3. pgAdmin (free, industry standard)
4. TablePlus (my favourite, but paid 😞)
5. DBeaver (has community version)

Whichever option you choose is up to you, but have one database client ready to check out your data at any time! Let's get back to Prisma!

🧪 Testing

1. Run pnpm dev again
2. Woo hoo! application runs 💃🏾
3. 💰 Profit! You should now see the welcome screen!

Let's set up the authentication. It's easy as 1-2-3!