Machine Learning Interview Series

Tanishk Kumar Shrivastava — Sat, 10 Aug 2024 17:04:34 +0000

Introduction

From today onwards I am going to start my machine learning interview series. In this I will post 5 questions everyday till the whole syllabus is completed.

Why to watch this series?

If you are preparing for machine learning or data science interview or even for your university exams theory is so important. You know that you can implement the code but not able to explain what you have done in technical language. So this series is for you here you can learn concepts with the interview perspective how to convey the knowledge to the interviewer.

What will happen in this series?

I am going to post 5 question everyday for six days a week and on Sunday we will revise the previous questions that I have mentioned.

I will mention answers of the questions with practical implementation and the Mathematics if required.

How you can contribute to this series?

Let's say you have read a question in this series and you know more advanced version of the answer that I have mentioned you can comment on the post and I will edit the answer.
You can suggest the questions which I will have to include in my next post.
Share this series in your group.

Authentication system in Next.Js using Auth.js

Tanishk Kumar Shrivastava — Fri, 09 Aug 2024 18:05:06 +0000

Hey there,

I was working on a project and then comes authentication part. Then I started searching for authentication library for nextjs rather than writing whole code by myself.

Where I landed on this amazing library known as auth.js.

So,
Here I am going to share how to set up auth.js with next.js and importantly the errors which I came across.

Let's get started:

Step 1. Setup the project :-

Open your desired folder in terminal.
Run npx create-next-app@latest to create a next app.

Then cd into your app by cd <your-app-name>

This should look like this :

Step 2. Install auth.js library :-

For npm users - npm install next-auth@beta

For yarn users - yarn add next-auth@beta

Error No 1 - Do not remove "beta" from the command

I intentionally removed the beta part from the installation command because I don't want to install beta version but then I bumped into so many error like import error and file error. So don't remove the beta part.

Step 3. Setup auth secret key :-

npx auth secret

This will automatically adds a secret key named "AUTH_SECRET" in your .env.local file.

AUTH_SECRET is a environment variable which is mandatory in auth.js.

Step 4. Create a new auth.ts file in the root directory of your project.

In my case its src directory.

Add the following code to it :

import NextAuth from "next-auth"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

Step 5. In your app folder create - /api/auth/[...nextauth]/route.ts file.

Add the following code to it :

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

Step 6. Create a new middleware.ts file in the root directory of your project.

Add the following code to it :

export { auth as middleware } from "@/auth"

Our initial setup is done. Now what we have to do is to setup authentication methods.

There are three types of authentication methods available in auth.js library:

OAuth
Magic Links
WebAuthn

In this tutorial I am gonna use OAuth method. You can choose between various OAuth providers for this tutorial I am going with Github.

Step 7. Go to https://github.com/settings/profile.

On left navigation bar scroll down and select Developer Settings.

Then click on OAuth apps. And create New OAuth App.

From there you get your client id and client secret.

Step 8. Create .env.local file in the root directory of your project.

Add the following environment variables to it :

AUTH_GITHUB_ID=<client-id-from-step7>
AUTH_GITHUB_SECRET=<client-secret-from-step7>

Note: Do not change the name of the variables.

Step 9. Add the Github Provider in auth.js file @/auth.ts

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GitHub],
})

Step 10. Create component folder inside src folder and add a SignInBtn.tsx component file to it. You can name it as you want.

Add the following code to it :

import { signIn } from "@/auth"

export default function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("github")
      }}
    >
      <button type="submit">Signin with GitHub</button>
    </form>
  )
}

You can also style the button as you want it to be.

Now use this button wherever you want.

Error No 2 - Do not use the button inside the page or component which is using "use client" property.

I used this button inside a component which is rendering on client side. If you carefully see the button code we are using "use server" in it, so it gives me error that I cannot use server service in the client side rendering. So be careful in it.

Enjoy.

DEV Community: Tanishk Kumar Shrivastava

Machine Learning Interview Series

Introduction

Why to watch this series?

What will happen in this series?

How you can contribute to this series?

Authentication system in Next.Js using Auth.js

Error No 1 - Do not remove "beta" from the command

Error No 2 - Do not use the button inside the page or component which is using "use client" property.