Day12 #100DaysOfCode

Add .env file

Added env_var.env file at root with following content:

GOOGLE_ID=
GOOGLE_SECRET=

with the values.

Also added it to gitignore

Install node module dotenv

npm install dotenv

and in pages\api\auth\[...nextauth].js used at very start, this conditional require:

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

npm run dev - start my next app

forgot to do the basic - npm install next-auth

restart:

Amazing! shows the login button because of change I did in components\layout\MainNavigation.js that is similiar to this change that next-auth expects.

on clicking this also shows Sign in with Google

but on clicking I saw unexpected:

saw this error on server log:

client_id is required
TypeError: client_id is required

logged and saw the values:

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

console.log(`google ID: ${process.env.GOOGLE_ID}`);
console.log(`google ID: ${process.env.GOOGLE_SECRET}`);

result:

google ID: undefined
google ID: undefined

ok let me try to add the loading require('dotenv').config() at start of _app.js

didnt work.

search on npm - https://www.npmjs.com/package/dotenv

Saw that with import a different syntax:

// .. or using ES6?

import 'dotenv/config' // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import

this also didnt work. Both are loaded as undefined.

F it. For now hardcoding it - (dont commit it! )

Works! clicking button takes to the Google Auth

why was loading env file not working? Anyway.

| Also redirectes back to where the Sign In button was clicked, and button turns into SignOut

Nextjs has inbuilt support for env variables!

Next.js has built-in support for loading environment variables from .env.local into process.env.

See more on the official documentation: https://nextjs.org/docs/basic-features/environment-variables