nextjs

Add a better link (styling), remove button 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: https://stackoverflow.com/questions/20165590/make-a-clickable-link-with-onclick-but-without-href In same SO, this answer worked for me well: https://stackoverflow....

Getting App ready to deploy remove hardcoded localhost externalize it to .env.local DOMAIN="localhost" PORT=3000 and use in code as: Old: const HOME_URL = "localhost:3000"; New: const HOME_URL = `${process.env.DOMAIN}:${process.env.PORT}`; Change also somewhere in Google OAuth… I gave somewhere in google auth setup, the localhost as callback URL. Will update it with cloud url (production env. url, where I deploy) Google it: google oauth callback URL googled google oauth setup found a visited URL: Integrating Google Sign-In into your web app Go to the Credentials page....

Show Modal in nextjs Show the personal link in a modal Better UI User may copy Google how to show modal. Found this, following it: https://devrecipes.net/modal-component-with-next-js/ It says to create a file _document.js that nextjs supports to render in a specific DOM node outside of root node of React. The way to modify the root DOM structure of our app is to use the _document.js file, which is provided by the library....

Signup using Google If simply a user logs in using Google for first time - we also sign him up(record him in our DB) If user selected sign up - we check for already existing record in our DB and create session - else add in records and create session(messages will be empty) If user selected Sign In (first time) - we check if user is not found in DB - we add that user....

After signin is implemented and you get session - useSession hook by ’next-auth/react’ gives you session object in react-function-component get the user data from: import { useSession } from "next-auth/react"; export default function Home(props) { const { data: session } = useSession(); if (session) { console.log(`User: -- ${session.user.email}`); Notice the if check on session - Tried to use session without checking if session is not undefined. Got errors - figured it our eventually....