I originally have 3 things

First one is:

        <li>
            <Link href="/">All Notes</Link>
        </li>

The button, however are:

        <li>
            <button onClick={() => signIn()}>Sign Up</button>
        </li>

Either style the buttons, or use Link.

Tried using Link for Sign Up

But Link cannot be without href , get error.

Googled - create link without href, says to use #, but it didnt work for me:

In same SO, this answer worked for me well: https://stackoverflow.com/a/20165637/11515646

So the change was:

           <li>
-            <button onClick={() => signIn()}>Sign Up</button>
+            <a className={classes.link} onClick={() => signIn()}>
+              Sign Up
+            </a>
           </li>

and in the related CSS:

+++ b/components/layout/MainNavigation.module.css
@@ -37,3 +37,7 @@
 .header a.active {
   color: white;
 }
+
+.link {
+  cursor: pointer;
+}

Also BTW, running locally the OAuth did not work because Credentials > Redirect URI in Google API Console did not have localhost anymore.

But Google lets you add multiple, so I did it and locally also OAuth works now:

Great success!

Observed that mylink was coming undefined (just reading DOMAIN from process.env.DOMAIN)

So realiezed that NextJS needs a prefix NEXT_PUBLIC_ on an env var if you want that var to be available on browser too.

That is where I need - on browser to show on Modal.

renamed in local .env.local and also on Vercel project env variables.

Works now!

Another error:

https://yournote.vercel.app/new-note/xian991gm

When using a good My Link, getting a 500 error.

on checking logs:

on Vercel - nothing useful

but on locally found that:


db\DBManager.js (99:31) @ Object.getUser

   97 | 
   98 | async function getUser(username) {
>  99 |   const uri = `mongodb+srv://${user}:${pass}@cluster0.xf7jy.mongodb.net/?retryWrites=true&w=majority`;
      |                               ^
  100 |   const client = await MongoClient.connect(uri);
  101 |   const db = client.db("users");
  102 |   const user = await db.collection("users").findOne({ username });

Fixed the bug.