DEV Community: Mateen Ahmed

Setting up Next Auth to Register with Google

Mateen Ahmed — Tue, 02 Jan 2024 09:55:18 +0000

Setting up Authentication for a project might seem difficult, but it is quite easy to enable Google authentication with Next Auth

I'm currently working on a next js social media app for practice and here's how to set up Google authentication quickly and easily

In your next JS project install the next-auth Library
Checkout the docs

We then copy this piece of code from the docs

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
export const { handlers, auth } = NextAuth({ providers: [ GitHub ] })

Create a file named auth.js or auth.ts (if using typescript)
create the file in the *lib * folder (lib/auth.ts)

The code can now be modified for Google authentication

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
export const { handlers, auth } = NextAuth({ providers: [ Google ] })

Now we need the clientId and the clientSecret from Google.

Head to Google Cloud console
and create a project or select one

Then in the sidebar under APIs and services select Credentials

Then click on Create credentials

and then on OAuth Client ID

Select application type as Web application

Add Authorized JavaScript origins as http://localhost:3000 (during development)

Then click on create

Store the Credentials in your .env file

In the Credentials section go to your Web Client (or whatever if you changed the name)

And add this in the authorized redirect URIs

In the .env file, you have to set NEXTAUTH_URL and NEXTAUTH_SECRET

Set the NEXAUTH_URL as http://localhost:3000/api/auth

And generate the NEXTAUTH_SECRET from this openssl terminal

openssl rand -base64 32

Now update the auth.ts file like this

export const {
    handlers: { GET, POST },
    auth,
    signIn,
    signOut,
} = NextAuth({
    providers: [
        Google({
            clientId: process.env.GOOGLE_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
});

create a new route.ts file in the app/api/auth/[...nextauth]
folder.

It will only contain this

export { GET, POST } from "@/lib/auth";

Create a form with an action

<form action={handleGoogleLogin}>
    <button>Sign Up with Google</button>
</form>

const handleGoogleLogin = async () => {
    "use server";
    await signIn("google");
};

the signIn function should be imported from the auth.ts file
Your Google Authentication has been setup

How to use Shadcn-ui Themes

Mateen Ahmed — Mon, 01 Jan 2024 10:48:24 +0000

On the shadcn-ui home page, you can select multiple themes apart from the basic ones which include

Red
Rose
Green
Blue
Yellow

And a few others, but when you install shadcn in a project you only get the option to select the basic themes.

To be able to use the above mentioned themes, you have to first select any option.

After installing the basic theme, you can go to the home page and select whichever theme you want to use.
I will be using blue for this example

Click the copy code button after choosing a theme.

After copying the code you have to replace the colors in your globals.css with the newly copied colors

However, nothing seems to be applied. To see the background color you need to add the

dark

property on the body (in case you are using dark mode)
otherwise, your new theme is set correctly

Making a Next JS Social Media Site

Mateen Ahmed — Mon, 01 Jan 2024 10:00:19 +0000

I want to level up my web development skills, so to practice I am thinking of making a full-stack social media app without following a long tutorial.

Technologies that I will use:

React
Next JS
Tailwind CSS
Typescript

I'm quite familiar with React but at a beginner level in Next JS and Typescript
So my goal is to be able to learn these things while building something I will be proud of.

Features I want the app to have:

Authentication
Proper Backend (MongoDB)
Real Time Messaging
Following users
Likes for posts

Things I want to learn through this project:

1.Prisma (for database models)
2.MongoDB

Managing File Uploads

Name of the site (AI generated):
Vortex

However, I don't have a design in mind and since I am a developer and not a designer, I might look for a design on Figma.