How to generate API keys for common services like social oAuth, database and analytics (NextGate setup) ⚙️

If you are here it might be two reasons random click or you bought NextGate and need make first setup. We are going to fill all the necessary env's and API keys for common services like social oAuth, database and analytics.

NODE_ENV=test
 
NEXT_PUBLIC_BASE_URL=http://localhost:3000/
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api
NEXTAUTH_URL=http://localhost:3000
 
AUTH_SECRET=
 
DATABASE_URL=
 
AUTH_SECRET=
 
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
 
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=
 
AUTH_RESEND_KEY=
RESEND_FROM_EMAIL="no-replay@example.com"
 
STRIPE_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_WEBHOOK_SECRET=
 
NEXT_PUBLIC_APP_NAME="AppName"
 
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
NEXT_PUBLIC_POSTHOG_API_KEY=
NEXT_PUBLIC_POSTHOG_HOST=
SIMPLE_ANALYTICS=
PLAUSIBLE_ANALYTICS_DOMAIN=

1. NODE_ENV

It's not a secret and must have in each project, but it's a common practice. It's a variable that is used to determine the environment the application is running in. It's a good practice to have different configurations for different environments. For example, you might want to use a different database in development than in production.

In NextGate you might see this use case in the drop-tables.mjs file.

if (process.env.NODE_ENV !== 'test') {
  console.error(
    `YOU CAN DROP TABLES ONLY IN TEST ENVIRONMENT. Current environment is: ${process.env.NODE_ENV}`,
  );
  process.exit(1);
}

2. NEXT_PUBLIC's

3. Database (Supabase)

1. Log in to Supabase and access your project.
2. Go to your project, then on the top navbar you have connect button, click on it. Then choose ORM in NextGate case it's a Drizzle.

3. Copy and fill the .env file with your password.

4. AUTH_SECRET

Just run this command in your terminal to generate a random string, and paste it into your .env file.

openssl rand -base64 32

5. GitHub OAuth

1. Visit the GitHub Developer Settings.
2. Create a New OAuth App:

• Click New OAuth App under the "OAuth Apps" section.
• Fill in details like:
• Application Name: MyApp
• Homepage URL: https://yourapp.com
• Authorization Callback URL: https://yourapp.com/auth/callback

3. Generate Client Credentials:

• After creating the app, you'll receive a Client ID.
• Click Generate a New Client Secret for the Client Secret.

4. Secure Your Credentials:

• Save the Client ID and Secret in your .env file.

6. Google OAuth

1. Go to Google Cloud Console.
2. Create a Project:

• Click the dropdown in the top-left corner and select "New Project."
• Name the project and click "Create."

3. Go to main view of project (you should see Walcome title):

• Navigate to APIs & Services > Credentials > OAuth client ID.

4. Create OAuth Credentials:

• Set the Application Type (e.g., Web Application).
• Provide Authorised JavaScript origins (e.g., https://yourapp.com).
• Provide Authorised redirect URIs (e.g., https://yourapp.com/api/auth/callback/google).

5. Save Credentials:

• Copy the Client ID and Client Secret and store them securely (e.g., in a .env file).

7. Resend API Key

1. Log in to Resend

• Visit Resend's Dashboard and log in to your account.

2. Access the API Section

• Navigate to the Settings section in the left-hand menu.
• Click on the API Keys tab.

3. Generate a New API Key

• Click the Create API Key button.
• Assign a name to your API key (e.g., "MyApp Key").
• Select permissions and assign domains for the key.

4. Copy the API Key

• Once the key is generated, copy it immediately as it will not be shown again.
• Store it securely in your .env file or a secrets manager.

8. Stripe

1. Log in to Stripe

• Visit Stripe Dashboard and log in to your account.
• create profile and fill all necessary information.
• for local dev turn on the test mode.

2. Access the API Keys

• In search bar navigate to Developers > API Keys
• Stripe provides two types of keys:
  • Publishable Key: Used for client-side operations (e.g., securely collecting payment details).
  • Secret Key: Used for server-side operations (e.g., creating charges, managing subscriptions).
• Copy the Publishable Key and Secret Key and fill .env file.

4. Set Up a Webhook

• Webhooks allow Stripe to notify your application of events (e.g., successful payments).
• Go to Developers > Webhooks
• Click Add Endpoint and configure:
• URL: Your webhook endpoint (e.g., https://yourapp.com/api/stripe/webhooks).
• Events to Send: Select the events you want to receive (e.g., product.created, checkout.session.completed).
• Click Add Endpoint and then Reveal in the Signing Secret section.

8. Analytics

NextGate allows to integrate with multiple analytics services like Google Analytics, Posthog, Simple Analytics, Plausible Analytics. You can check which one you want to use.All documentations are simple as much it's possible, just follow the steps and fill the .env file.

Conclusion

Setting up API keys and environment variables is essential for securing and configuring your NextGate project. With this guide, you’ve learned how to integrate popular services like GitHub OAuth, Google OAuth, Stripe, Resend. Remember to keep your credentials secure and tailor the setup for your environment. Once configured, you’re ready to build and scale your application with confidence. Happy coding! 🚀