Forem: Kaushal

Using GitHub OAuth with Next.js

Kaushal — Tue, 27 Jul 2021 06:31:11 +0000

Today, in this tutorial I'll be telling you how to implement OAuth in your Next.js application.

We'll be using GitHub OAuth in this example, but you can go ahead and add any OAuth provider you want later on.

The beauty of this approach is that you don't have to spend time configuring and setting up authentication all by yourself, and can rely on these providers. This won't require a database connection.

tl;dr

If you just want to check the code out, you can visit github.com/k4u5h4L/nextjs-oauth-demo

Prerequisites:

Node.js installed.
Any node.js package manager installed. I'm going to be using yarn, but you can use npm too.

Let's get started!

Go ahead and create a new next.js project

yarn create next-app next-oauth-demo

And then open it in your favorite text editor.

Let's install a packages called next-auth which will help us implement authentication very easily.

yarn add next-auth

Now, let's write some code which will set up the backend for next-auth. Create a new file exactly like this in having the path: pages/api/auth/[...nextauth].js.

You need to have the brackets like that in order to service all requests going to /api/auth/ to let next-auth handle it.

Your folder structure should look like this:

Now, open the [...nextauth].js file and add some configuration.

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default (req, res) =>
    NextAuth(req, res, {
        providers: [
            Providers.GitHub({
                clientId: process.env.GITHUB_CLIENT_ID,
                clientSecret: process.env.GITHUB_CLIENT_SECRET,
            }),
        ],
        debug: process.env.NODE_ENV === "development",
        secret: process.env.AUTH_SECRET,
        jwt: {
            secret: process.env.JWT_SECRET,
        },
        callbacks: {
            async redirect(url, baseUrl) {
                return "/";
            },
        },
    });

Here in the file we have linked some environment variables which we will fill later on.

Now, let's go to GitHub and get our ID and secret keys. Go to github.com/settings/developers. In the OAuth Apps tab click on New OAuth App.

Now you'll need to fill in some details about your app. Except the Application name and the Application description keep everthing else the same as shown in the below picture.

Hit Register application. Now, you'll be greeted with a screen with your Client ID. Click on the button to generate client secret.

Now you'll get your client secret key. Copy those two keys.

In the root of your project, create a file called .env.local and paste the tokens here.

Add the AUTH_SECRET and JWT_SECRET as well. Just hadjhjasdasdjasruhsfdghfgsdfsd away at your keyboard!

pro tip: Don't use the same keys I show here.

Now, your backend is configured!

Let's go ahead and make some login and secret pages utilizing some of next-auth's APIs.

We'll make the pages/index.js page as a login page. Paste the following code in it

import React from "react";
import { useSession, signIn, signOut } from "next-auth/client";

export default function Home() {
    const [session] = useSession();
    return (
        <div>
            <h1>Github OAuth Demo</h1>

            {!session ? (
                <>
                    <button onClick={() => signIn("github")}>
                        Sign in with Github
                    </button>
                </>
            ) : (
                <>
                    <p>
                        Not {session.user.name || session.user.email}? Then
                        Logout and login again
                    </p>
                    <button onClick={signOut}>Logout</button> <br />
                </>
            )}
        </div>
    );
}

Here, we're just checking if there already is an existing session. If there is, we want to tell the user the same and give the option to logout. Else, we will show a button to login using GitHub. Simple React stuff!

Now, run the dev server

yarn dev

You should see a page like this.

Click on the Signin with GitHub button to be signed in!

After signing in, you'll be logged in using GitHub!

And that's all it takes to implement OAuth with GitHub in Next.js!

If you want to know more about next-auth, you can check out the docs here.

Hope this article helped you in some way. Cheers!

Configure Next.js for cross platform development with Capacitor js

Kaushal — Mon, 26 Jul 2021 13:18:13 +0000

Ever wanted to make an mobile app but never wanted to handle multiple codebases?

Well with Next.js and capacitor you can!

Next.js has gotten really popular over the days, and much of it is justified. It is an absolute joy to work with and provides with an amazing developer experience.

Today I'll be telling you how to build a mobile app with the same codebase as your next.js application and run on in mobile devices as a native app! Also a bonus section on how to use it as a desktop app as well!

tl;dr

Making Android, iOS and desktop apps with Next.js.
If you just want the code, you can visit
github.com/k4u5h4L/next-capacitor-demo

Should you use it in production?

Well, it depends on you... Everythinig is a tradeoff and Next.js + Capacitor isn't perfect either.

Advantages:

Ease of maintaining just one codebase for both your web and mobile apps.
You don't have to leave your beloved Next.js and React ecosystem.
Makes more business sense to use a cross platform app.

Disadvantages:

Some features native to Next.js can't be used in a mobile or desktop app. So project changes need to be done.
Performance may take a hit.
The project is not yet mature and is still pretty new, although very exciting.

Things to consider

If you're used to Next.js, you'd have used its server side rendering features, like getServerSideProps. Sadly, they won't work with capacitor. Next.js wasn't really meant to be used for mobile development.
For live reload your laptop/desktop and phone need to be connected via WiFi, at least if you're following this article.

Let's get started shall we!

Prerequisites:

You need to have Node.js installed.
Any nodejs package manager. I'm using yarn here but you can use npm as well.
A physical mobile device with USB debugging turned on connected to your system
Java installed. Preferably version 8. This is to build your app for android. Check version by running

java -version

Enough talk, let's get to it!

Let's initialize a new Next.js project. Run

yarn create next-app next-capacitor-app

After everything is downloaded, let's install capacitor in our project.

yarn add @capacitor/core @capacitor/cli @capacitor/android @capacitor/ios

After installing the dependencies, let's initialize capacitor.


npx cap init next-capacitor-app com.nextcap.app --web-dir=out

# The format as per capacitor docs
# npx cap init [name] [id] --web-dir=build

We're setting the web-dir as out because when we export assets it'll be there in the out directory.

Install the native platform you're targetting

npx cap add android
npx cap add ios

Now you should be up and running with it. Go to your pages/index.js and edit it to get a basic page.

import React from 'react'

export default function Home() {
  return (
    <div>
      <h1>
        Hey there!
      </h1>
    </div>
  )
}

Now, let's export the static assets from next!

yarn run build && npx next export

pro tip: You can add the next export command to your scripts section in your package.json.

Now, sync your next.js assets with android and ios platforms

npx cap sync

After this, connect your physical device run the app. Check if the phone is recognised by adb first.

adb devices

# if a device appears, run the next command.
# else accept a pop up if it appears on your device

npx cap run

Now you should see the app installed on your phone and you can interact with it just like any other app!

But wait, we forgot one thing. While development, live changes won't work. You'll need to build, export and run everytime. That's very hectic, so let's start up live reload now!

When you ran npx cap init [***], a capacitor.config.json file will be created in the root of your project. Let's go ahead and edit it so that we can add a server for live reload!

To get the IP address of your system, run

ifconfig

or any other equivalent command depending on your OS. I use ~~Arch~~ Linux btw, so ifconfig works fine. If you're on windows, you can try running ipconfig.

That will be your local network IP. Mine is 192.168.1.9. So I'll be using that.

In your capacitor.config.json, add this:

{
    "server": {
        "url": "http://192.168.1.9:3000"
    }
}

Now with this set up, run

yarn run build
npx next export

npx cap sync

Now you can run the development server given by next.js

yarn dev

And now with the dev server running, run your app on your physical device as well.

npx cap run

Great! You now have live reload with your app! Just remember to remove the server config from capacitor.config.json before building your release APK.

Bonus section

Congrats if you've made it this far! Now we will build the app to work with electron.js as well for desktop apps!

Add and install electron platform for capacitor

yarn add @capacitor-community/electron
npx cap add electron
npx cap sync

To run your app,

npx cap open electron

Now enjoy life with your Next.js codebase spanning over the Web, Android, iOS, Windows, MacOS and Linux.

Well, that's about it. Hope this article helped y'all. Cheers!

Scraping memes from reddit using node.js

Kaushal — Sun, 05 Jul 2020 13:59:20 +0000

We all like memes, don't we? If you thought of making an application which serves memes from the internet but didn't know how to, you've come to the right post! Here I will show you how to scrap memes from Reddit yourself, and not relying on any other APIs. So let's get started!

We'll be using axios and cheerio for web scraping.

tl;dr

All the code demonstrated in this post is up on GitHub

Prerequisites:

Node.js installed.
Npm installed. This should come with node.js.

To check if they are installed, type

node --version

and

npm --version

Now that everything is installed, we can start.

Start

We will start on an empty folder. Run

npm init -y

to generate a package.json file. Now we can install required dependencies. Run

npm install axios cheerio

Now let's actually start coding some JavaScript!

Make a file names index.js in the root directory of the project, and open it in your preferred text editor.

Now import the required libraries into your project.

const axios = require("axios");
const cheerio = require("cheerio");

Now we will choose a site to scrap from. For the sake of this guide I will be scraping memes from r/dankmemes.

const mainUrl = `https://reddit.com/r/dankmemes`;

According to the documentation of axios, we will set up the intial code.

axios
    .get(mainUrl)
    .then((response) => {
        console.log(response.data);
    })
    .catch((err) => {
        console.log(err);
    });

The .get() method takes in the URL of the site. Because axios runs asynchronously, you have to add a .then() method to do something with the data. We will just take the data and log it in the console.
In this process, if something goes wrong, the .catch() method catches the error and displays it. This is put for better error handling.
So now let's finally run the code and see what we get!

node index.js

And whew! We get loads of text. But this "text" is actually the HTML code what is hosted in the URL we specified.

But we needed only the image source right? So now we should parse and filter the HTML got using an amazing library called cheerio. Cheerio helps us parse HTML in a jQuery like fashion, which makes is amazingly easy to do out job. And it's fast too!

But we need to see what to filter right? To know that, we have to visit the URL we specified, which is https://reddit.com/r/dankmemes. So head on to the site in another tab.

When everything finished loading, right click on any image post and choose inspect element. This should open chrome's developer tools. When the image element is highlighted, you should see some other attributes inside the <img /> tag.

Below I have taken a random post on the subreddit, and you can see a src="" attribute on the right side of the screen. That is the data we need to scrap! But how to we exactly locate that image? Simple, we look into other attributes of the same HTML element.

Here in our case we can see that the image as a class of

<img alt="Post image" class="_2_tDEnGMLxpM6uOa2kaDB3 ImageBox-image media-element _1XWObl-3b9tPy64oaG6fax" src="https://preview.redd.it/g64fe51e6z851.jpg?width=640&crop=smart&auto=webp&s=c5917f6…" style="max-height: 512px;">

Bingo! We got hold of the different classes in the image tag. So now let's continue with parsing this HTML data.

SO instead of console logging the HTML, we will pass it into another function to parse this data.
So this should be your axios part so far.

axios
    .get(mainUrl)
    .then((response) => {
        dealWithData(response.data);
    })
    .catch((err) => {
        console.log(err);
    });

Now create a function called dealWithData() or any other name you have given in the .then() method.

Now we will add some code inside that new function.

const dealWithData = (html) => {
    const $ = cheerio.load(html);
    const urlMeme = $("._2_tDEnGMLxpM6uOa2kaDB3.ImageBox-image.media-element._1XWObl-3b9tPy64oaG6fax");
    const indexValue = 0;
    console.log(`Source is:\n${urlMeme[indexValue].attribs.src}`);
};

Here, we are assigning the $ sign with the parsed html content using cheerio, just to make it more jQuery-like.

Now that we know our image element's attributes, we assign the HTML content of the image to a variable. Note that all images will have the same classname, so you will get an array of image elements returned. You can try to console log to see it. So we will assign an index value 0, which gets us the first image. And then we log the src of the image element with its index value. This will take some time to run but you should eventually get the result.

But there is a problem here. Notice that if you run this multiple times, there is a chance you get the same image source again and again. So instead of hard coding the index value, we will generate a random value.

const randNo = (limit) => {
    const thatNo = Math.floor(Math.random() * limit);
    return thatNo;
};

Also don't forget to update the same in your dealWithData() function or whatever name you have given it.

const indexValue = randNo(urlMeme.length);

We will pass the length of the array to get a random index number. Now putting together all this code, we will run the full program.

And wow! you should get an output of this kind.

Source is:
https://preview.redd.it/gnmgdb09q0951.jpg?width=640&crop=smart&auto=webp&s=8175c12e8aaa356af8f7cc78fe4e0b83d37341e2

And done. You can visit the link and check. You now have your very own meme scraper!

The same code can be used to scrap from different subbreddits. Just specify the required URL when starting out.

Happy coding! Cheers!