Setup

Preparation

1. Unpack the Archive

2. Switch to the project's root directory

cd basic-next-prisma-authjs

2. Install the node dependencies

npm install

3. Copy the sample configuration

cp .env.example .env

Services

Database

1. Install PostgreSQL via Homebrew, Chocolatey or download it from the website.

brew install postgresql

2. Add an initial user.

sudo -u postgres psql
CREATE USER postgres WITH PASSWORD 'password';
ALTER USER postgres WITH SUPERUSER;
\q

3. Update .env with your database credentials.

DATABASE_URL=postgresql://postgres:password@localhost:5432/database?schema=public

4. Apply the database migrations.

npx prisma migrate dev

Google Login (Optional)

1. Visit the Google Cloud Console.
2. Create an account if you don't have one already.
3. Navigate to APIs or click here
4. Configure the OAuth consent screen and add yourself as test user.
5. Click on Credentials, create new OAuth credentials and save those credentials.
6. Add the Authorized JavaScript origin to the credential settings.

http://localhost:3000

7. Add the Authorized redirect URI to the credential settings.

http://localhost:3000/api/auth/callback/google

8. Update .env with the created credentials.

AUTH_GOOGLE_CLIENT_ID=
AUTH_GOOGLE_CLIENT_SECRET=

Microsoft Login (Optional)

1. Visit the Azure Portal.
2. Create an account if you don't have one already.
3. Navigate to your Entra ID (Active Directory).
4. Register a new application with platform web.
5. Click on Authentication in the menu and add the redirect URIs

http://localhost:3000
http://localhost:3000/api/auth/callback/microsoft-entra-id

6. Under Certificates & Secrets, create a new client secret.
7. Update .env with the created secret.

AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID=
AUTH_MICROSOFT_ENTRA_ID_CLIENT_SECRET=

Billing

Stripe

1. Visit the Stripe Dashboard.
2. Create an account if you don't have one already.
3. Activate test mode.
4. Activate the customer billing portal.
5. Create a product.
6. Create a price for the product.
7. Navigate to developer section and copy the API credentials.
8. Update apps/dashboard/.env with the IDs and credentials:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
PRO_PRODUCT_ID=
PRO_PRODUCT_PRICE_ID=

Billing unit

You can specify the billing unit as per_seat or per_organization. The difference is that per seat you bill for every user in the organization and per_organization you bill for the whole organization regardless of user seats.

BILLING_UNIT=per_seat # per_seat | per_organization

We recommend to leave it at per_seat if you are not sure.

Webhook

To receive webhooks you can either use the Stripe CLI or ngrok. Let's say you use ngrok. Start ngrok, then go to Developers -> Webhooks and create a new webhook. Enter your ngrok URL + /api/stripe/webhook:

https://randomsubdomain.ngrok-free.app/api/stripe/webhook

Open your newly created webhook and on the right side is a Signing secret. Press reveal and copy the secret, then update .env with the secret:

STRIPE_WEBHOOK_SECRET=

SMTP Provider

Achromatic supports both NodeMailer (SMTP) and Resend.

1. Choose an email provider (Gmail for testing is fine).
2. Update .env with your settings/credentials.

EMAIL_SENDER=noreply@mailer.mydomain.com # recommend to use subdomain for transactional/marketing emails
EMAIL_MAILER=NodeMailer # NodeMailer (default) | Resend
 
# NodeMailer
 
EMAIL_SERVER_HOST=
EMAIL_SERVER_PORT=
EMAIL_SERVER_USER=
EMAIL_SERVER_PASS=
 
# Resend
 
EMAIL_RESEND_API_KEY=

Note: For Gmail, you'll need to use an app-specific password. Follow Google's instructions to generate one. Here is an example:

EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=465
EMAIL_SERVER_USER=example@gmail.com
EMAIL_SERVER_PASS=suyz yeba qtgv xrnp

Application

1. Start the Application

npm run dev

2. Navigate to http://localhost:3000

You’re all set to start!