Forem: Gourav Khunger

That's my first project in golang. It's fully open source, do check out!

Gourav Khunger — Thu, 05 Jun 2025 08:54:56 +0000

Gourav Khunger

Jun 5 '25

Showcase Your GitHub Repository’s Users in the README [< 5 Mins]

#opensource #github #go #typescript

Comments 2

2 min read

Showcase Your GitHub Repository’s Users in the README [< 5 Mins]

Gourav Khunger — Thu, 05 Jun 2025 08:52:58 +0000

If you’ve ever published a library on GitHub, you’ve probably noticed that GitHub shows a nice sidebar section on some repositories — "Used by X repositories" — giving your project social proof and discoverability.

Unfortunately, this info is only visible if 100+ repositories depend on your project.

That sucks because I maintain several open source libraries like jekyll-auto-authors that have dozens of real users and I'd love to showcase that information despite the thresholds.

So I built dependents.info — a simple tool that shows your network dependents right inside your README!

Watch a quick demo

How it works

The idea is simple: dependents.info is a GitHub Action written in TypeScript + a Go based API that together generate a SVG image showing which repositories depend on your package.

Just like contrib.rocks, but for network dependents.

The tech stack:

GitHub Action in TypeScript: Crawls your repository’s network dependents and sends them to the backend.
API in Go (Fiber): Authenticates using GitHub OIDC to verify requests, stores data, and generates a minimal SVG image with avatars and names of top users.

Features

Works for any public GitHub repository.
Secure: uses GitHub’s built-in OIDC to verify authenticity.
Shows top 10 dependent repos (sorted by stars).
Live SVG badge, embeddable in any README.
Supports a lot of configurations.
Robust caching and rate-limit friendly.
Minimal setup: just a few lines in a .yml GitHub workflow.

Setup

Add a GitHub Action to your repository:

Add this simple workflow file to your repository's .github/workflows folder.

dependents.yml

name: Dependents Action

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  dependents:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
    steps:
      - uses: gouravkhunger/dependents.info@main

Copy the following code snippet below and replace owner/repo with your repository's name. paste it wherever you want to embed the image.

<a href="https://github.com/owner/repo/network/dependents">
  <img src="https://dependents.info/owner/repo/image.svg" />
</a>

Made with [dependents.info](https://dependents.info).

As soon as you push these changes, you'll see the image inserted automatically!

See It Live

Website: https://dependents.info
GitHub:
gouravkhunger / dependents.info

easily generate an image of github network dependents to showcase in your project's readme
dependents.info

easily generate an image of github network dependents to showcase in your project's readme.md file.

simply use the embed codes, or optionally add a github action for customizations, in your repository.

demo

here's a demo of the generated image for the gem jekyll-auto-authors:

quickstart

embed image

note: to customize the frequency of image re-generation, please setup the github action.

copy the following code snippet and replace owner/repo with your repository's name. paste it wherever you want to embed the image.
<a href="https://dependents.info/owner/repo"> <img src="https://dependents.info/owner/repo/image" /> </a>
if your repository hosts multiple packages each with it's own tracked dependents, use this:
<a href="https://dependents.info/owner/repo?id=idHere"> <img src="https://dependents.info/owner/repo/image?id=idHere" /> </a>
by default, the image is generated from the first few dependents. use the github action to control this…
View on GitHub

Got ideas or feature requests? Drop them on the repo — contributions and feedback are super welcome.

Hope this project helps bring visibility to your packages, no matter how big or small!

Happy coding :)

— Gourav

9 Hand Picked FREE Heroku Alternatives [2023]

Gourav Khunger — Thu, 06 Jul 2023 10:18:59 +0000

Beginning November 28, 2022, Heroku, one of the most popular go to choice used by developers to host their apps, announced that it would be shutting down its free tier.

Note: Listen to the audio version of this article at genicsblog.com.

The Platform-as-a-Service (PaaS) provider's free tier used to provide a generous 550 hours of dyno uptime which could be easily extended to 1000 hours with a verified credit card.

Even though these dynos shut down after 30 minutes, it could be resolved by various methods to keep Heroku apps awake, thus becoming the easiest way to host software projects for free.

The free tier shutdown news left many developers in search for alternative hosting platforms that could provide a similar API and website hosting services free of cost. As a result, I have compiled a list of the top 9 free Heroku alternatives to use in 2023.

If you are interested in watching a video format of this article, check this out:

While there are many hosting platforms available in the market, these carefully selected services provide the best options for developers to host their Frontend/Backend applications, APIs, Servers, etc.

These alternatives offer features similar to Heroku, such as support for multiple programming languages, easy deployment, and scalability. So whether you are a seasoned developer or just getting started, keep reading to discover the top free Heroku alternative hosting platforms:

1. Deta

Deta space is a relatively new comer to the market but their offerings make them top our list. You can host both static and dynamic content within minutes.

Whether it be building frontend or backend applications with any technology, Deta has got you covered with their infrastructure they call as the "Personal Cloud".

Pros

No credit card verification required.
Easy project deployments through their CLI application.
No limits on the number of builds / deployments.
Support for any kind of technology/framework to build your application.
Free hosting for Node.js / Rust / Go / Custom backend apps as well as SvelteKit / Next / Static Apps.
Free application uptime throughout the month.

Cons

The pros far outweigh the cons of Deta making it the best choice for developers to host their projects and applications and move away from Heroku.

Deploying on Deta requires initial project configuration and setup changes.
Resource usage limits are generous but may not be sufficient for everyone.

2. GitHub Pages

GitHub Pages is a free web hosting service provided by GitHub. You can easily create and host static websites served directly from your project's GitHub repository.

It offers a simple and efficient way to serve static websites built with HTML, CSS, and JavaScript.

It also supports popular website generators such as Jekyll, Hugo, Gatsby, etc. You can also use custom GitHub Actions to create your own publishing pipeline in a matter of minutes.

GitHub Pages provides support for custom domains, HTTPS encryption, and easy integration with other GitHub features such as Git version control and issue tracking all for free!

Pros

Free web hosting for static websites.
Easy integration with other GitHub features.
Support for popular static site generators.
Simple and intuitive user interface for creating and managing websites.
Ability to collaborate with other developers on the same repository and website.
Good performance and reliability due to GitHub's infrastructure.

Cons

No support for dynamic websites or web applications.
No support for server-side scripting or database integration.
1 GB storage and 100 GB monthly bandwidth soft limit on the free tier.
Not suitable for websites that require higher levels of security or scalability.

This service is perfect for those who want to showcase their side projects, blogs, or portfolios without the need for complex infrastructure or hosting setups.

3. Oracle

Oracle Cloud's free tier has been a game changer recently. The Always Free services provide unmatched resources for developers to build and deploy their apps, without worrying for usage limits.

Pros

Reliable services from Oracle.
Host any kind of applications.
VMs stay up indefinitely — No fret about downtime.

Cons

Requires credit card verification to begin usage.
Platform complexity makes it not so easy to use.
Manual configurations required for deployment.
Overkill for small / medium projects.

4. Cloudflare Pages

Cloudflare Pages is a part of the numerous services provided by Cloudflare for building and deploying static websites, APIs, and applications.

It provides a simple way for developers to create high-performance websites that are scalable, secure, and easily integrated with other Cloudflare services.

Whether you are building a personal blog or a complex web application, Cloudflare Pages offers a range of features and benefits that make it a great choice for web development.

Pros

Free web hosting for static and dynamic websites, including unlimited bandwidth and custom domain support.
Full stack support with serverless functions using Cloudflare Workers.
Unlimited preview deployments for your projects!
Support for redirects and headers for files.
Automatic SSL encryption and security features, including DDoS protection and firewall rules.
Easy integration with popular Git-based version control systems like GitHub, GitLab, and Bitbucket.
Support for popular web frameworks like React, Next.js, Vue.js, Angular, etc.
Fast and reliable global content delivery network (CDN) powered by Cloudflare's infrastructure.

Cons

500 builds per month hard limit.
A maximum of 20,000 files per deployment where each file should be less than 25 MiB.
Complexity for developers who are not familiar with serverless architecture or the Cloudflare ecosystem.
No built-in database support, although these can be integrated with third-party services.
Limited support for legacy web technologies or platforms that are not Git-based.

This service is the most suited for those who already use Cloudflare services with their existing websites and are looking to migrate to a different hosting platform.

5. Vercel

Vercel is a cloud-based platform that provides users with the most modern UI/UX to deploy their websites and applications within minutes. It is focused on providing an easy-to-use solution for building and deploying websites and applications.

It has become a popular choice among developers who are looking for a platform that can offer serverless deployment, scalability, and performance. With Vercel, developers can easily deploy their code and enjoy fast loading speeds, excellent scalability, and reliability.

Pros

Best for Next.js powered projects.
Easy to use dashboard built for fast deployments.
Automatic serverless deployment and scaling using its cloud infrastructure and CDN.
Easy for developers to handle traffic spikes and scaling needs.
Extensive library of plugins and support for integrations, and add-ons.
Excellent documentation and community support.
Vercel Sponsorships for open-source projects.

Cons

Vercel's free plan has various limitations.
Although it supports popular web frameworks like Next.js and Nuxt.js, it is not the best choice if you require more flexibility and control over your stack.
It is a cloud-based platform, which means that developers do not have complete control over the underlying infrastructure and environment.
Vercel's recently launched serverless storage solutions are relatively new.

6. Railway

Railway is like a copy of Heroku but with slight differences. The platform's UX is top notch, and their pricing and restrictions are good enough to make it a viable Heroku alternative.

Pros

Platform experience is very similar to Heroku with the UI being very modern.
Deploy any kind of API / website tech stack.
Great documentation to get started with.
Easy integration with GitHub to deploy your repository.
All plans include preview environments for each PR, Multiple custom domains with SSL, deploy from any GitHub repository, etc.
Built-in database integrations.

Cons

Limited resources without credit card verification. Once verified, it is generous enough to sustain small / medium scale projects for free.
Even though they bill for resource usages by the minute, it can become expensive quickly if you pass the limits.

7. Render

Render is a powerful cloud platform designed to simplify the process of building, deploying, and scaling websites and applications. It has gained popularity among developers due to its ease of use, reliability, and robust set of features.

Pros

Render offers a generous free tier with ample resources, including free SSL certificates and custom domain support.
Automatic scaling and zero-downtime deployments, ensuring your website or application can handle traffic spikes and updates without interruption.
Support for a wide range of programming languages and frameworks like Node, Python, Go, Rust, PHP, Elixir, Docker, etc.

Cons

Render deletes Free tier PostgreSQL databases after 90 days from creation, making their database services unusable without paying a fee.
May become expensive for scaling.

8. Cyclic

Cyclic is designed to streamline your DevOps workflows and revolutionize the way you approach continuous integration and deployment. With Cyclic, developers can harness the power of automation to build, test, and deploy their applications effortlessly.

Pros

Apps on Cyclic do not sleep even on the free tier.
Cyclic's smart caching technology delivers the best performance globally.
Features its cron jobs technology with 1 second precision triggering.
Easily scalable.

Cons

As of now, Cyclic supports JavaScript, TypeScript, and Python runtimes only.
Good for APIs but not for other types of projects.

9. Fly.io

Fly.io is an edge computing platform that empowers developers to optimize their applications for lightning-fast performance and global delivery.

Pros

Fly.io features a vast network of edge servers strategically placed around the world to bring your applications closer to your users.
Generous free allowance to run small scale apps.
Supports many languages and frameworks like Go, Crystal, RedwoodJS, Python, Ruby, Deno, etc.
Seamless traffic shifting and canary deployments to roll out updates gradually, ensuring a smooth transition while minimizing the risk of errors or downtime.
In depth migration from Heroku guide.

Cons

The learning curve to use Fly.io can be steep.
Better alternatives exist to host small scale apps.

Notable mentions

Netlify and Firebase are also great tools to deploy basic frontend apps for free.
If you need finer control over your stack, AWS / GCP / Azure are the leading cloud services.

Conclusion

I hope this comprehensive list of 9 hand picked Heroku alternatives that you should be using in 2023 helps you evaluate your options for deploying your backend APIs and frontend applications.

Did I miss any great option? Leave a comment below to start a discussion.

Thank you for reading so far!

Genics Log #2: Sponsorship from Vercel, Theme updates, Organic Growth and more

Gourav Khunger — Sun, 19 Jun 2022 06:14:19 +0000

Welcome to the second issue in the Genics log series! I know this is super late in the month, but I wanted to share some updates on the blog from the past months.

Listen to this article at Genics Blog

Before diving into the latest news at Genics, I would like to introduce myself. I am Gourav Khunger, the founder of Genics Blog. I am a teenager from India who is passionate about software development and open source.

In the last article in this series, we talked about how we went open source and how we managed to grow from 200 visitors/month to 500+ visitors/month, along with sponsorship from BeyondWords.

This log is more inclined towards the core theme infrastructure and how we managed to grow our community to 600+ readers now.

Let's get started!

Staging ENVs with Vercel

This was a crucial step in forming a better infrastructure for building the theme and its plugins.

Previous setup

From the beginning itself, I planned to create a separate repository for the theme just because it would allow us to use a separate GitHub Pages for staging.genicsblog.com.

This was the GitHub Actions file that deployed the theme to staging url. We made sure to block indexing using the robots.txt file's Disallow: / directive.

But here comes the tricky part - the staging was not relevant until we were able to deploy PRs to preview them. Staging environment for approved and merged PRs didn't matter as much as environment for previewing the pending PRs.

A huge problem was that we couldn't use repository secret variables in GitHub Actions if it ran using pull_request event but those variables are needed to deploy to gh-pages.

For that, we had to use pull_request_target event trigger which allows PR actions to use the repository secrets to access the staging environment.

But the catch here is, this comes with security vulnerabilities as the PRs are run in the context of the repository base and not the PR base.

This could mean that user can manipulate the workflow file to misuse the repository secrets!

Vulnerability in main repository

The above mentioned issue was actually present in the main repository. I had setup a workflow for PRs using pull_request_target because I wanted to automerge "correct" changes to drafts by authors.

YES, this was a big mistake but fortunately, no one exploited this vulnerability using which one could clean up the whole repository in minutes (making a delete commit and managing to automerge it using repo secrets).

I did have security measures in place:

An automerge happened only if the PR changes article files that are owned by the specific author. The python script referenced takes in the list of files changed in the PR and goes through them to verify if the PR author is the actual author of the article files.

Now, you could argue that a person could change the script in the PR and this check would easily be bypassed. That is the reason that the workflow uses wget to download the script from the main branch and then run it. It deletes the scripts in the PR and downloads the correct one before running.

But again, I was still skeptical of the pull_request_target event trigger. The docs don't clearly mention it, but I am not sure - If the action runs in context of the PR base, then is it possible that the author change the action script and bypasses the script download and other verification checks?

This is the reason we now moved to Vercel to off-load all these security issues and still be able to deploy staging ENVs!

Sponsorship from Vercel

Vercel{:rel="dofollow"} was generous enough to sponsor our GitHub organization to be able to deploy organization repositories for free!

Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

This sponsorship now enables us to remove our vulnerable GitHub actions and migrate to Vercel deployments. It was as easy as setting up the installation and build scripts. Vercel automatically deploys all PRs to staging environments!

Now we can easily preview pull requests and test them visually before moving them to production!

Theme updates

We have worked on massive improvements to the theme and its plugins!

Paginating author pages (#7)

This was by far the biggest need for the theme. Author pages like this could get super big without pagination and that affects load times a lot.

This was a big problem for the Jekyll community as well - there was no plugin to handle multiple authors with ease.

This lead me to spend time messing with jekyll-paginate-v2 and understanding how its pagination works. With some days of effort, I came up with jekyll-auto-authors which completely simplifies the process of paginating author pages!

Here's an in-depth tutorial on using the plugin to paginate author pages.

Shortcut commands (#10)

There are new shortcut commands you can use to perform these actions on the site:

Opening up search bar: command + K or Ctrl + K. To close it please use the Esc key.
Toggling the site theme: command + shift + L or Ctrl + Shift + L.

Copy button for code blocks (#1)

Copy buttons on code blocks have been given an overhaul and provide a much nicer user experience.

Spam comments

In light of recent spam abuse of our commenting system, we have removed the comment system for now. We might use giscus in future but there's no plans for it right now.

Please use our Discord server for discussions on articles on the site.

Other updates

Here are some minor but relevant updates we've made to the theme:

More open-graph meta tags (#39): better for SEO.
Migration to GA4 (#21).
Selection color for code blocks (#28).
Refactoring series pages (#2).
For authors: tools like frontmatter generator (#93) and thumbnail generator.
Licensing for the theme and articles (#136).

Stats

Open Source

Here are the stats that changed from the last time:

genicsblog.com (Main repo with posts and data files): 25 stars, 20 forks.
theme-files (Basically template files): 7 stars, 9 fork.

Google Analytics

Here are the recent 30-day stats from our Google Analytics:

Join our Discord server to view these public stats every day :)

Organic Stats

Almost 40-50% of our monthly traffic is through organic channels!

Final Words

It's been an absolute rollercoaster ride for us to get to this point! It was from 100 readers a month in December when I decided to open source the blog and start working on a newer and better version of it. And here we are, scaled to 600+ readers within 3 months!

In the near future, I plan to continue working on the improvements and scale to at least 5k readers per month. Up to that point, we will focus mainly on putting out quality content that people find insightful while focusing on gaining traffic through organic channels mainly.

After the 5k checkpoint, there will be great things to come ;)

Looking forward to your feedback and suggestions!

Kotlin: Multi-dimensional Arrays

Gourav Khunger — Mon, 09 May 2022 16:47:42 +0000

At some point of time, we all have worked with arrays. It is a useful data structure to store multiple values of the same type in a single variable. Complex usage of arrays includes storing data in 2D, 3D, or other multidimensional arrays. This allows us to represent things like matrices, grids, and cubes effectively.

In this tutorial, we will specifically focus on declaring, initializing and using 2D, 3D, and other multidimensional arrays in the Kotlin programming language.

Pre-requisites

To understand multi-dimensional arrays and lists in kotlin, you need to have a proper understanding of 1D arrays. I have published an intuitive article about kotlin arrays similar to this one, do read the article before proceeding.

2D Arrays in Kotlin

2D arrays are a convenient way to store grid/board/matrix type of data.

If we dig deep into Kotlin Standard Library, the function arrayOf() is actually returning Array<T> where T is the type of the elements in the array. This effectively means that if we pass in T we get out an array Array<T>.

This means if we pass in arrayOf() into the arrayOf() function, we effectively get out Array<Array<T>> and that is exactly the representation of 2D Arrays!

2D Arrays with pre-defined data

Let's see how to make 2D arrays with predefined values:

val array = arrayOf(
    arrayOf(1, 2, 3),
    arrayOf(4, 5, 6),
    arrayOf(7, 8, 9)
)

This creates a 2D Kotlin array which is a collection of 1D Kotlin arrays. Here's a representation of the array:

General Form:
[[1 2 3], [4,5,6], [7,8,9]]

As a matrix:
1 2 3
4 5 6
7 8 9

Again, these arrays are not type-safe. You can add another data type to the array without any issue. To make it type-safe, we need to declare the type of the array during initialization:

val array = arrayOf<Array<Int>>( // Declaring the type gives error if data types are mixed
    arrayOf(1, 2, 3),
    arrayOf(4, 5, 6, "this string will give error"),
    arrayOf(7, 8, 9)
)

2D arrays with dynamic size

To create 2D lists where we don't have a fixed known size, we use mutableListOf<MutableList<T>>() declaration where T is the data type we expect the inner lists to hold. We don't pass any initial value because the array will be populated using some logic later.

Let's look at it in action:

val list = mutableListOf<MutableList<Int>>()

// The elements within the inner lists can be anything, the numbers below are just an example.

// `repeat()` takes in a number and iterates from 0 to number-1
repeat(4) {
    // `row` is a new row in the array
    val row = mutableListOf<Int>()

    repeat(4) { col -> // `col` is a new column in the row, ranges from 0 to 3
        row += col
    }

    // Append the row to the array, can also use the `add()` function
    list += row
}

// for each list in the list, print its element in matrix form
for(sublist in list) {
    for (j in sublist.indices){
        print("$j ")
    }

    println() // new line after each row
}

/*
You can also access particular elements like:
list[0][0] -> First element of the first row
or
list.get(0).get(0) -> Same as above
*/

This code outputs the following:

And hence we can create dynamic lists in kotlin as per our needs.

N-Dimensional Arrays in Kotlin

Using the approaches discussed above, it wouldn't be hard to create 3D, 4D or even more dimensional arrays.

If the dataset you have is known, you can use the arrayOf() function, or to have variable array data, you can go ahead with mutableListOf() functions to create the arrays.

Conclusion

In this tutorial you learned about the arrays and mutable lists in kotlin using arrayOf() and mutableListOf() functions.

These functions help you to create arrays and lists of any data type in Kotlin, to store values and perform actions based on that data.

I hope you find this tutorial useful. Share it with your friends who are beginning with kotlin!

How to Create a Pull Request in GitHub Correctly

Gourav Khunger — Wed, 06 Apr 2022 07:50:23 +0000

A major aspect of open source is the ability to create and maintain a community of developers who collaborate on building software together. Collaboration is a key component of open source development!

Read this article at genicsblog.com

Git and GitHub are popular open source collaboration tools. Git helps you keep track of changes to your code, and GitHub helps you share your code with others. In this article we will teach you how to create a pull request in GitHub in the correct way.

We will use this demo repository to demonstrate the process on collaboration. Feel free to play with it and see how it works. Follow along the tutorial below.

1. Fork the Repository

Forking a repository means you are creating a copy of the repository to your own GitHub account. This makes a clone of the repository that you can work on.

Any changes to your fork will not affect the original repository! Thus, it is kind of a playground area for you to experiment with code/files.

To fork a repository, simply press the Fork button on the top right corner of the repository page:

This creates a new repository in your account.

2. Clone the Repository

Cloning a repository means you are downloading the repository to your computer. This creates a folder that you will work on.

Run this command in your terminal

git clone https://github.com/<your-username>/PRs-demo

This will clone the repository to a folder names PRs-demo which you can cd into:

cd PRs-demo

3. Create a New Branch

Branching is a way to work on a different version of files in a project with Git version control. Creating a new branch is effective when you are working on a new feature or bug fix. Here's why:

It helps to keep changes organised and clean.
It separates changes from working code in main branch. In case of broken code, you can easily revert to the main branch.
This also helps your fork's main branch clean once your PRs are merged (more on this later).

Run this command in your terminal:

git checkout -b <new-branch-name>

Here, <new-branch-name> is the name of the new branch. It can be anything like: bug-fix, feature-1, feature-2, etc. For simplicity purpose you can keep it learning-about-prs.

The -b flag is used to create a new branch, and checkout asks Git to switch to that new branch we created.

To verify that you have correctly switched to the new branch, run:

git branch

This should output something like this:

* learning-about-prs
  main

The * verifies that you are currently on that branch.

4. Make Changes

Now you can make Changes to the files in the project. Here, we just have a README.md file. You can edit it and add this sentence to the end of the file:

- This line was added by [<Your Name Here>](https://github.com/<your-username>).

Make sure to replace <Your Name Here> with your name and <your-username> with your GitHub username!

5. Commit your changes

Committing your changes is crucial to save the current state of your project.

You can check the current state of your project by running:

git status

This tells us which files have changes that are not committed yet. The output would be something like:

On branch learning-about-prs
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
    modified:   README.md

Now, we can prepare the README.md file to be committed. Files that have finalised changes and are ready to be committed are moved to the staging area. Git only commited files that are staged, which provides us even more flexibility.

git add .

This adds all the changed files to the staging area. Optionally you can handpick files to be added.

Now, you can make a commit by running this command in your terminal:

git commit -m "<Commit Message>"

Here -m flag lets us add a message to our commit. This message is helpful for other people viewing change history of the project. Replace <Commit Message> with a short summary of the changes you made. For example: "Added a new line to the README.md file".

6. Push changes to your fork

Now that you have committed the file locally, you need to send this file over to your fork present on GitHub.

NOTE: GitHub doesn't automatically know about your commits made locally. You need to push the commits yourself.

Since you have made changes to learning-about-prs, you can push them to GitHub with this command:

git push -u origin learning-about-prs

Here we are asking git to push our changes to the branch learning-about-prs on the origin present on GitHub (your fork).

-u sets the upstream for current branch so that you don't have to type origin learning-about-prs everytime. From the next time, even if you type git push it will push to learning-about-prs branch on GitHub.

Additional Note:

Here, origin is linked to your fork. You can verify it by running this command in your terminal:
git remote -v
This should show the push and fetch links which point to your fork.
If you change these links by using git remote rm origin and git remote add origin <new-link>, the commits will be sent to new remote then!

7. Make the PR

Once you push your changes to GitHub, open the fork on GitHub. You will be able to see a a notification regarding the new commits to learning-about-prs branch.

Press the Compare and pull request button and you will be presented with an interface to create a pull request.

Enter appropriate Title and Comment to our PR. This helps the reviewers know what changes you are making to the repository.

Once you are done with adding the metadata to the PR, go ahead and press the "Create Pull Request" button.

Congratulations 🥳

You've successfully made a Pull Request to a repository on GitHub!

Using these steps you can create a Pull Request to any repository on GitHub!

(Optional) Useful Information

I forgot to make some required changes but made a PR, do I have to make a new one now?

Absolutely no! GitHub is smart enough to handle this. You can't create more than one PR from a single branch. This means that you can add more commits to the current branch and as soon as you push them, they will automatically go to the existing PR.

Just add as many commits you want, to the branch and use git push. That will send the commits to the existing PR, avoiding the need to create a new one from scratch!

Why do we create a new branch in the first place?

There are quite a few reasons to it. The main one being it maintains a separation of concerns. One can work on differnt number of features at the same time without affecting existing working code.

This also helps teams to assign different features to different people and collaborate on different parts of projects in realtime.

Another reason is, once the reviewers approve and merge your changes, it adds a new commit to the original repository.

Now your fork would get left behind because it doesn't automatically pull new changes from the original source.

GitHub provides us with Fetch upstream button to keep our fork in sync with the remote repository.

Pressing Fetch and merge gets changes from original repository to our fork allowing us to keep the fork up to date.

If we had made changes directly to the main branch, it could cause merge conflicts as our fork would have different commits than original repository.

Also, this could pollute the new PRs with old commits if the main branch of fork isn't kept up to date with original repository.

What is a good place to start with open source?

Genics Blog is an open source developer publication where we do a lot of open source work. We are a high school student run organisation. Join our community on Discord to learn about opportunities from experienced developers and get involved!

Further Resources

Check out this video where I use the steps taught here to create a PR to the theme-files repository for Genics Blog on GitHub:

Watch at 1.25x speed for better experience :)

Conclusion

This was a long but to the point Guide to create Pull Requests on GitHub which can help you to contribute to open source projects on GitHub.

If you find this guide helpful, or have any related questions feel free to comment or join our discord to get help.

Share this article with people who are new to open source world!

Genics Log #1: Sponsorship from BeyondWords, Open Source, Organic Stats and more

Gourav Khunger — Fri, 11 Feb 2022 09:13:38 +0000

Hello there, I hope you are doing well!

This is the first article in the Genics log series where we will be documenting our monthly progress on the blog and report what's been brewing up in the past months.

Read this article at Genics Blog

Let's get started!

Introduction

Genics Blog went open-source at this New Year, which means we started accepting community contributions for the blog.

Within a month itself, we have reached huge milestones! Here's a gist of some stats from the past month:

The Core team members increased from 1 to 5 members!
A total of 15 articles were posted in January!
A total of 40 members joined the Genics Blog discord server!
Rose from 200 monthly visitors to 500+!

How it all started

I always wanted to create a community of skilled developers who create quality content around topics!

As the new year began, I grabbed the opportunity to open source my existing blog and build a community around the existing content.

And since we chose the open source way, we quickly rose from 200 visitors/month to 500+ visitors/month!

Open Source Setup

We use GitHub for our open source projects. Everything we build around Genics is open source because we want to be as transparent as we can!

For this blog, we used Jekyll to generate the website and render all the content. The beauty of Jekyll is we can use any design template, while writing the articles in markdown format. It renders the complete site with an easy build command!

GitHub Pages works really well for hosting the website, because jekyll generates static html pages which work seamlessly with GitHub Pages.

There's a lot more to share on how the site and management works. I'd love to write articles on how we build and operate our systems completely for FREE, so keep an eye out on the developer documentation and future posts on Genics blog!

Announcing BeyondWords.io Sponsorship

Just a few days ago we got sponsored by BeyondWords.io!

BeyondWords is an AI voice and audio publishing platform that brings frictionless audio to writers, newsrooms, and businesses!

It is a platform that allows anyone to publish their written scripts in audio format to the world. In my opinion, the best part about is its text to speech AI conversion modules are far better than those of Google and Amazon as the audio it generates seems to be near human voice!

Genics Blog got sponsored by BeyondWords where they generously offered us free services to convert our articles to audio formats! You can try out the audio functionality right at the top of this post!

Stats

We have grown manifolds just because of the fact that we went open source!

Open Source

Here are the stats for the repositories under Genics Blog organization:

genicsblog.com (Main repo with posts and data files): 21 stars, 14 forks
theme-files (Basically template files): 2 stars, 1 fork
docs (Documentation website): 3 stars, 2 forks
genics-bot (Bot for the Discord server): 5 star, 1 fork

Google Analytics

Images speak louder than words!

Organic Stats

Future Plans

We are looking forward to producing a lot of quality content in the future, as well as working on improving the platform.

Here are a few examples of some things we'd work on in the near future:

Building certain tools to aid the writing process for authors at Genics Blog.
Adding table of content to the posts.
Social previews for anchor tags in posts.
Copy buttons for code blocks.
Adding some cool webmention functionality to our articles, so as to highlight who shares our articles.

And a lot more!

You can check out the issues page on theme-files repo to see what's on the roadmap.

Final Words

I'm really glad to be sharing this info with you!

Did you know we have a discord bot that sends notifications on our analytics and stats everyday 👀. I bet you, hardly anyone would do that :P

Do join us there to get notified of new posts and updates on Genics Blog.

If you find what we are doing as high school students fascinating, consider joining us and be a part of Genics Blog! Here are the ways you could contribute to it.

Looking forward to seeing you engage with the active community on our Discord server :)

Next generation Hello World program

Gourav Khunger — Tue, 01 Feb 2022 11:14:20 +0000

While learning a programming language, I am pretty sure you started with the basic "Hello World!" program :)

But once you advance in a particular programming language, the Hello World code would start seeming to be boring.

But here's an interesting challenge for you! My friend and I have created a challenge out of the basic Hello World code so you could stretch your coding muscles and judge how well you know about the language you specialize in!

Read this article to learn about the challenge and also how to solve the given problem.

Though it might feel it is for advanced coders, everything is explained in a beginner-friendly way so it's worth checking out!

My first article at freeCodeCamp 🎉

Gourav Khunger — Wed, 17 Nov 2021 11:29:01 +0000

Recently I wrote my first ever article for freeCodeCamp. It is an in-depth tutorial on adding swipe animation to an Android view.

Check it out here:

https://www.freecodecamp.org/news/add-swipe-animations-to-a-card-view-in-android-app/

What do you think about the article? Let me know in the discussion below 😃

I usually publish my articles at genicsblog.com and share them here, if you wanna opt in for my newsletter you can do that on my blog and follow to get notified about new content 😄

How to Support Multiple Fonts in an Android App

Gourav Khunger — Sat, 06 Nov 2021 19:15:31 +0000

You would hardly see any Android app that allows its users to be able to choose from a set of fonts to be used for the whole app, based on the user's preference. The major reason being it is hard to implement!

Why should you bother?

Accessibility is a major aspect that every app developer should focus on. Imagine an app with an amazing utility but one that is barely usable. You don't want to loose your user base!

I used to neglect this, but here's why I am writing this post.

If you follow me on any social media, or here on my blog, you know that I built JekyllEx to be able to manage Jekyll blogs from my Android device.

Recently, I a person reached out to discuss about their chronic headaches that are triggered by font and colours that don't go well on their eyes and it would be great if I allowed some settings to be able to customise it based on user preferences.

I quickly went to have a look at what the Android accessibility guidelines had to say.

https://developer.android.com/guide/topics/ui/accessibility

But to my surprise- I DIDN'T FIND ANYTHING. If you take a look at those guidelines, you'll find Google actually emphasizes developers a lot to take measures and make their app accessible for all kind of users. But such a common problem hasn't been addressed. Believe me, there are many a people with varied levels of such reading problems.

And I usually don't enable such settings in apps, but I thought it would be a great challenge to overcome, because mostly, all the solutions that already exist are inefficient: most stack overflow answers ask to traverse the ViewGroup's children and apply custom typeface as they find Text.

I had some other thoughts and it was obvious I would be making an Android library that somehow resolves this issue.

The Challenge

In broad aspects, an Android app is just a set of View(s), held together by ViewGroup(s), that perform certain actions when loaded, clicked, etc. All that together makes the functional app.

But here's the catch- each view has its own Context, that gives access to the current state of the view, and that makes it harder to think about how to implement the multiple-font feature, as each view needs separate handling to update its font.

Here is a typical example of how to update the font of a single TextView:



val typeface = ResourcesCompat.getFont(this@MainActivity, R.font.source_code_pro) // get font from res/font/ directory
binding.helloWorld.typeface = typeface // apply the font to the text view

Imagine you have 20+ text views, or rather a RecyclerView(as in JekyllEx), in which each of the items has a significantly large number of TextView(s).

Here, each RecyclerView item actually has 8 TextViews! Imagine updating the font manually for each view, one-by-one. It would be really inconvenient!

I had a look to some stack overflow questions and as told earlier, most of them were old and in-efficient.

The Solution

From the very beginning I knew I would store the default font in a SharedPreference. For those who don't know about it, it is Android's way to allow apps to store simple key-value paired data that the app can use without write access to the disk. For most of the cases, it suffices to use SharedPreference instead of writing to disk and it was super handy in this case.

I would store the resource id, an integer identifier that is given to all types of resources in any app, in SharedPreference, and retrieve that value to apply the font when the view is inflated (rendered on screen).

This was the most efficient way I could come up with, because SharedPreference is really optimised. The values are cached and retrieving multiple values within a short time doesn't affect performance much.

There exists another way, by changing the themes.xml values at runtime and applying font directly from the styles itself, but it requires minimum API level 23 (Android 6.0). So it wouldn''t be backward compatible and make the app crash on lower Android versions. I didn't want to do so.

The Result

Here's the library that I built:

gouravkhunger / Fontize

Fontize is an Android library that enables multi-font selection functionality to beautify your app.

Fontize Android Library

Built with ❤︎ by Gourav Khunger

Fontize is an Android library, written in kotlin, that enables your android app have multiple fonts for your TextViews and switch between them in a jiffy!

A quick demo:

Adding Fontize to your project

Include jitpack in your root build.gradle file.

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

And add it's dependency to your app level build.gradle file:

dependencies {
    implementation "com.github.gouravkhunger:Fontize:1.0.1"
}

Sync the project and you'll have imported Fontize successfully.

Start using Fontize

Make sure you have all your fonts in the res/font/ directory. Support for font files in the assets folder will ship soon!

Rename all the TextViews or AppCompatTextViews in your project to com.github.gouravkhunger.fontize.FontizeTextView - You don't have to change anything else, and the view would still perform the same :)

Before:

<TextView

…

View on GitHub

Once you add fontize to your project, you need to follow certain steps mentioned in the repositorie's README and your project will migrate to use intelligent Fontize views that can work united and can change fonts in a snap.

Here's a demo of what you can Achieve with Fontize:

To set the default font for the app, you just have to add this line of code just below onCreate() function in your app's launcher activity (the one that is triggered when app icon is clicked) only once:



Fontize(this).setDefaultFont(R.font.exo_2) // replace with the font you desire

Internally, this function creates a SharedPreference value if it doesn't already exist:



fun setDefaultFont(resourceId: Int) {
    val sharedPref = PreferenceManager.getDefaultSharedPreferences(context)
    val fontId = sharedPref.getInt("fontFamily", ResourcesCompat.ID_NULL)

    if (fontId == ResourcesCompat.ID_NULL) {
        sharedPref.edit()
            .putInt("fontFamily", resourceId)
            .apply()
    }
}

To update the font for the entire app, you just need to run this code and Fontize will handle it automatically for you:



Fontize(this).updateFont(R.font.zen_old_mincho) // updates fontFamily throughout app

Here's the interesting part, this function just updates the fontFamily value stored in SharedPreference for the app:



fun updateFont(resourceId: Int) {
    val sharedPref = PreferenceManager.getDefaultSharedPreferences(context)
    sharedPref.edit()
        .putInt("fontFamily", resourceId)
        .apply()
}

The actual work happens in the view classes. Let's take the example of FontizeTextView, or any similar class. It just extends the parent View and applies the font by picking its value from SharedPreference:



class FontizeTextView(
    context: Context,
    attrs: AttributeSet
) : AppCompatTextView(context, attrs) {
    init {
        val prefs = PreferenceManager.getDefaultSharedPreferences(context)
        val fontId = prefs.getInt("fontFamily", ResourcesCompat.ID_NULL)
        if (fontId != ResourcesCompat.ID_NULL) {
            val typeface = ResourcesCompat.getFont(context, fontId)
            this.typeface = typeface
        }
    }
}

All this code does is, to override the default view to apply the font family as soon as it inflates. Similar classes for views that support texts within them, like workarounds for MenuItem(s) and Toolbar(s), will be shipped soon.

If you need to look at a live project that uses Fontize in production- checkout JekyllEx app on GitHub. It doesn't use the initial version that was published on Jitpack, but it uses a custom fork as per its needs and requirements, but Fontize will soon evolve and be able to do a lot more than just TextViews 😄

Conclusion

Believe me or not, starting this project, to finishing the base version with a working FontizeTextView, to publishing it on jitpack- all just finished within 2 hours! Fontize deserves a star for that effort 😎.

I hope you learnt something new out of this post. If you want to keep reading quality Android development content, consider joining my newsletter @ Genics Blog.

Do comment and let me know what topic should I pick to publish an article next week. All kinds of feedbacks are appreciated :)

Thanks and happy coding!

Trying out Next.js for the first time 🤯

Gourav Khunger — Mon, 27 Sep 2021 10:56:47 +0000

You read the title right! I tried something other than Android this time :P

I have always been wanting to learn web development. If you know my background, you probably know I first learned HTML, CSS, and really basic Javascript at first. If not, consider reading this article to know more about my journey:

But just learning that wasn't enough to make better websites. Technically we can make functional websites with them. But it isn't intuitive. Using just HTML and CSS to make a good-looking website is a headache because files become too long to manage. At least that was the case for me :(

Sure, you can use tools like Tailwind CSS, but neither was I aware of such tools nor did I knew there are frameworks like React, Angular, Vue, etc. which can make the process of building websites easy.

It was obvious that I left web dev back then and that was when I turned to Android. I have been doing Android dev for more than 2 years now. And I recently realized - staying in a single domain while the tech world progresses will slow your progress.

I am not saying you should learn everything that comes out each day. But having a gist of other things won't be harming you. I have tried both things- sticking to a single tech and also trying different things. And I bet you, trying new things teaches more than repeating what you know again and again!

For a long time, I wanted to try out web dev again, more because websites work on any device, and just knowing Android was limiting me to the devices I can make apps for.

The Hashnode Bootcamp's Day 5 task was a perfect moment I could try a new thing and write about it. And here I am writing about using Next.js for two really basic things I needed to work on. Here are the projects:

Birthday Wish Generator

Check it out

GitHub Repo:

gouravkhunger / nextjs-birthday-wish

This is a minimal Next.js app where you can create birthday wishes and share the link to anyone :)

Happy Birthday Wisher

Check out the Live Website.

This is a simple Next.js project where you can generate a birthday wish for someone.

Just enter their name, press Go and share them the generated link :)

Don't forget to ⭐️ this repository!

Images

Local Setup

First, clone this repository:

git clone https://github.com/gouravkhunger/nextjs-birthday-wisher

Install the dependencies:

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Contributing

In order to make a hassle-free environment, please make sure to read the Contribution Guidelines and follow all the steps mentioned there Are we missing any of your favorite features, which you think you can add to it❓ Feel free to do so.

All contributions are welcome.

Learn More

To learn more about Next.js, take…

View on GitHub

One of my friend's birthdays is near and I wanted to do something special for them. And looking at the Next.js, I quickly thought to make a simple page with some confetti popping in the background, and their name on the front.

I quickly made the project with:

npx create-next-app nextjs-birthday-wish

But this thought struck my mind: Since I am gonna deploy it to Vercel anyway, I can make a home page where anyone can enter the name of the person they want to send a wish, and then copy the generated link to be sent.

Also, I could make it open source just to increase the number of reports on my profile so that I can flex on the count.

I quickly created two pages, along with their CSS modules. Here are the screenshots:

Home Page

Birthday Wish

I completed the project in 3 hours, took so long because I had to test 7 different confetti libraries that work with Next.js 😂. Finally used [confetti-js](https://www.npmjs.com/package/confetti-js).

I also spent some time on CSS and the routing stuff- because I don't know CSS that well, but I am improving day by day. The CSS design of this blog is done by me!

But I think I did a pretty decent job. And it was fun trying next js for the first time, it's a great framework on top of React, so if you are learning Next.js you are learning concepts of React too. So it is a win-win case.

S̶t̶r̶i̶k̶e̶d̶ ̶T̶e̶x̶t̶ ̶G̶e̶n̶e̶r̶a̶t̶o̶r̶

(The title for this section is generated with this tool 😂)

Check out the project

GitHub repo:

gouravkhunger / nextjs-strikeit

A simple site to get a striked through version of text.

StrikeIt

Check out the Live Website

This is a simple Next.js site to quickly get the striked through version of text copied to your keyboard.

Don't forget to ⭐️ this repository!

Images

Local Setup

First, clone this repository:

git clone https://github.com/gouravkhunger/nextjs-strikeit

cd into the folder and then, run the development server:

# download dependencies
npm i
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Credits

Icons made by surang from www.flaticon.com

License

MIT License
Copyright (c) 2021 Gourav Khunger

…

View on GitHub

Here are the images:

Home Page

Preview of striked text

I needed this generator because I use Google Calendar to stay focused and plan the work I have for a day.

I don't clutter my day with huge time boxes because that doesn't work for me and I need the flexibility to carry out my tasks.

What I do is: I copy a template of three events for each day the day before it, and put the things I need to carry out in their respective category.

This works well for me. But actually, the text in google calendar events cannot be striked through once it is completed- as you can do for tasks rather than events.

I could have used many of the text formatting tools available online to cut my text and strike to check them off. But I generally forget random website names and the same would be the case with many 😂. Also, most free tools have ads and trackers, which isn't convenient.

So, why not try to build this thing with Next.js? The thought of increasing repo count on GitHub profile still came 😜.

I again quickly made a new Next.js project, deleted the unnecessary blurb that comes by default then copied from the last project added the text box.

This time I faced a new difficulty- to display the striked text preview in a paragraph below the input box. I could set an event listener when the input box's text changed, but didn't know what to do to get a reference of the paragraph below it, as we can't do the traditional document.getElementById() in Next.js apps.

With some research, I learned we can use useRef to maintain a ref of elements, and it worked! I learned how this snippet gives you striked version of the text and then implemented it when input occurs.

I learned how easy it is to copy something to the device clipboard using Next.js. This piece of snippet does the work:

navigator.clipboard.writeText("This will be copied!")

It took me ~4 hours for this project because I wanted to make it responsive and I was struggling with the input box width for different screens, at the end made it work well with some hit and trial 😆

Final Words

I hope you liked the article, consider commenting to let me know what you think!

It was my first experience with Next.js and I must admit it was really good. Though I got many errors and go to learn a lot in the meantime, it was worth it!

Do check out the projects on GitHub and star them. And since you are going to star them, why not follow me there too? 😆

I post resourceful content on this blog, consider subscribing to the newsletter by filling the form at the top of the article to get notified of the new content that I keep posting. Alternatively, join Hashnode and follow me!

Let's get in touch.

Originally posted on genicsblog.com

Integrate Authentication to your Android App with Auth0

Gourav Khunger — Mon, 27 Sep 2021 10:40:51 +0000

Auth0 is an amazing tool to easily integrate user authentication in any kind of app you are building. It has a great set of tools to enable auth in your app in a few really quick steps.

Today, we are going to look into how to integrate Auth0 into your Android App! First, we'll set up the local project for integrating Auth0, and then we'll set up the app on the Auth0 dashboard.

Check out this video to learn what we are going to build in this tutorial:

The code for this basic app that we are going to build is present here on GitHub, star it and follow me :)

gouravkhunger / auth0-demo-android

Demo implementation of Auth0 Authentication for Android

Demo Implementation of Auth0

Read the article.

Demo implementation of Auth0 Authentication for Android.

License

This project is MIT Licensed.

MIT License
Copyright (c) 2021 Gourav Khunger

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS

…

View on GitHub

Android app setup

Initialize the project

First, create a new Android Studio Project. If you are just checking out Auth0, you can follow the steps mentioned in one of my previous articles on how to make a basic project using Android Studio.

You can also use any existing project!

Set up view binding

What is it?

View binding is a new way of referencing views from XML layouts inside your java/kotlin classes. View Binding creates a Binding class for each XML layout resource which you can use to refer views without the hassle of using findViewById() or using the deprecated kotlin synthetics.

Enable View Binding

If you are reading this post in the future, chances are that view binding is supported right into new projects using Android Studio.

If not, you can go into the App level build.gradle file and add this piece of code anywhere inside the android scope.

buildFeatures {
    viewBinding true
}

This image will give you a gist of where to add it:

Integrate Auth0

To integrate Auth0 into our project, we need to do the following things.

Add Auth0 dependencies

In your app level build.gradle dependencies section, add the following:

dependencies {
  // ... other dependencies

  // Auth0 Android SDK
  implementation 'com.auth0.android:auth0:2.4.0'
}

Add manifest placeholders

You need to add one more simple line of code to the app level build.gradle file:

android {
    defaultConfig {

        // ...

        // Add this
        manifestPlaceholders = [auth0Domain: "@string/com_auth0_domain", auth0Scheme: "demo"]
    }
}

This creates an intent-filter which is used by the library to open your app back once the login is done by the user. If this is not done you have to define an intent-filter on your own. This method is easier than handling that.

The @string/com_auth0_domain is actually a string resource, you need to declare it in your strings.xml as follows:

<string name="com_auth0_domain">Your domain here</string>

Don't worry if you don't have a domain like this yet, scroll below to find the auth0 dashboard setup, or you can skip this for now and come back to it later!

Press Sync Now on the notification bar to complete the finalize the above things.

Add Internet Permissions to Manifest

You would need to add the internet permission to the AndroidManifest.xml file to allow network access, else the app may crash during login process.

Add this line in your AndroidManifest.xml file as shown in the image below:

<uses-permission android:name="android.permission.INTERNET" />

Make a basic UI

Open the res/layout/activity_main.xml file and replace the content with this layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/nameTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textSize="30sp"
        android:textColor="#000000"
        android:text="@string/john_doe" />

    <TextView
        android:id="@+id/emailTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="28dp"
        android:textSize="18sp"
        android:text="@string/email" />

    <Button
        android:text="@string/login"
        android:id="@+id/loginBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"/>

    <Button
        android:text="@string/logout"
        android:id="@+id/logoutBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />

</LinearLayout>

This will create a simple layout that has the name and email text on top and two buttons to log-in and log-out. You'll have to create string resources for dummy name and email placeholder.

Coding the `MainActivity`

Initialize View Binding

Create a lateinit var for the view binding:

private lateinit var binding: ActivityMainBinding

Inflate the binding the the onCreate() method:

binding = ActivityMainBinding.inflate(layoutInflater)

Finally, set the root element of the binding as the content view:

setContentView(binding.root)

Here's what the MainActivity.kt file looks like after doing the above changes:

// package name
package com.github.gouravkhunger.auth0demo

// imports
import ...

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }
}

Initialize Auth0

First, you'll need to create an instance of the Auth0 class.

// Imports
import ...

class MainActivity : AppCompatActivity() {

    // other vars ...
    private lateinit var account: Auth0

    override fun onCreate(savedInstanceState: Bundle?) {

        // ...

        // Set up the account object with the Auth0 application details
        account = Auth0(
            "xljNBT32DCsVDN7sYDM1qEHMD2mA1fVp",
            "auth0-demo-android.us.auth0.com"
        )

        // ...
    }
}

This is the client id and domain of my sample app, replace it with yours to make it work. To get these parameters for your app, skip ahead to the setting up auth0 section.

Add Log-in

Now, proceed to set the onClickListener on the button. This will be triggered whenever the button will be clicked.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding.loginBtn.setOnClickListener {
            WebAuthProvider.login(account)
                .withScheme("demo")
                .withScope("openid profile email")
                // Launch the authentication passing the callback where the results will be received
                .start(this, object : Callback<Credentials, AuthenticationException> {
                    // Called when there is an authentication failure
                    override fun onFailure(error: AuthenticationException) {
                        // Something went wrong!
                        Toast
                            .makeText(this@MainActivity, "Login Error: \n${error.message}", Toast.LENGTH_LONG)
                            .show()
                    }

                    // Called when authentication completed successfully
                    override fun onSuccess(result: Credentials) {
                        // Get the access token from the credentials object.
                        // This can be used to call APIs
                        val accessToken = result.accessToken
                        showUserProfile(accessToken)
                    }
                })
        }
    }
}

Now, once a user presses this button, the login process will start and they'll be asked to log in with their E-mail id.

You can use any scheme name, here I used demo. But I recommend not to use https because it might conflict with the intent-filters internally. I got this error while building JekyllEx.

Once the login is successful, we can get the access token which can be used to retrieve the user profile. Let's make a function to get the user profile from the token:

private fun showUserProfile(accessToken: String) {
    val client = AuthenticationAPIClient(account)

    // With the access token, call `userInfo` and get the profile from Auth0.
    client.userInfo(accessToken)
        .start(object : Callback<UserProfile, AuthenticationException> {
            override fun onFailure(error: AuthenticationException) {
                // Something went wrong!
                Toast.makeText(
                    this@MainActivity,
                    "Error getting profile \n${error.message}",
                    Toast.LENGTH_LONG
                ).show()
            }

            override fun onSuccess(result: UserProfile) {
                // We have the user's profile!
                binding.nameTv.text = result.name
                binding.emailTv.text = result.email
                Toast.makeText(
                    this@MainActivity,
                    "Login Successful!",
                    Toast.LENGTH_SHORT
                ).show()
            }
        })
}

Add Log-out

Now, let's make a function that enables logging out.

private fun logout() {
    WebAuthProvider.logout(account)
        .withScheme("demo")
        .start(
            this,
            object : Callback<Void?, AuthenticationException> {
                override fun onSuccess(result: Void?) {
                    // The user has been logged out!
                    Toast.makeText(
                        this@MainActivity,
                        "Successfully logged out!",
                        Toast.LENGTH_SHORT
                    ).show()
                    binding.nameTv.text = resources.getString(R.string.john_doe)
                    binding.emailTv.text = resources.getString(R.string.email)
                }

                override fun onFailure(error: AuthenticationException) {
                    Toast.makeText(
                        this@MainActivity,
                        "Couldn't Logout!",
                        Toast.LENGTH_SHORT
                    ).show()
                }
            }
        )
}

Now, our app is ready to handle log-in and logout. You can also checkout the content of the MainActivity.kt file on the repo.

Setting up Auth0

Make an account

First, let's do the setup needed at the auth0 dashboard.

Go to the official Auth0 site and press signup on the navigation bar. After making an account, you would be taken to the dashboard where you can create a tenant. Here, the tenant is what auth0 calls a project. A project can have a number of applications in it.

All the applications in a single-tenant have the same user database and storage.

Set up the tenant

Create a new tenant. You can choose any domain name for your tenant, here I am choosing auth0-demo-android. For now, this will be a subdomain, but you can customize it to your custom domain by upgrading your free plan.

Create a new app

Go to the applications section and press create a new app. Since we are building an Android app, choose the native field and hit create.

Since we are going to develop an app that will use this tenant, tag it in the development phase.

After creating your app, go to the app settings

Scroll down to the Application URIs section, there add callback URLs for login and logout. These are required to let Auth0 know what apps are authorized to perform these actions as these strings contain identifiers for our app.

demo://<tenant-domain>.us.auth0.com/android/PACKAGE_NAME/callback

Replace the package name and tenant domain with that of your own app. If you have set a scheme other than demo, change it here.

Here's an example:

After adding them, scroll all the way to the bottom and save the changes.

Now you can go ahead and replace the Client IDs and such things in the code, wherever necessary.

Congratulations 🥳

You have successfully added Auth0 to your Android app. Trust me, though this post was long, it is actually really easy if you try it on your own.

If you stayed along till this far, I am really thankful to you! Please comment on your experience with Auth0 and this article.

Let's connect with each other :)

Originally published at genicsblog.com

Forem: Gourav Khunger

That's my first project in golang. It's fully open source, do check out!

Showcase Your GitHub Repository’s Users in the README [< 5 Mins]

Showcase Your GitHub Repository’s Users in the README [< 5 Mins]

Watch a quick demo

How it works

Features

Setup

See It Live

gouravkhunger / dependents.info

easily generate an image of github network dependents to showcase in your project's readme

dependents.info

demo

quickstart

embed image

9 Hand Picked FREE Heroku Alternatives [2023]

1. Deta

Pros

Cons

2. GitHub Pages

Pros

Cons

3. Oracle

Pros

Cons

4. Cloudflare Pages

Pros

Cons

5. Vercel

Pros

Cons

6. Railway

Pros

Cons

7. Render

Pros

Cons

8. Cyclic

Pros

Cons

9. Fly.io

Pros

Cons

Notable mentions

Conclusion

Genics Log #2: Sponsorship from Vercel, Theme updates, Organic Growth and more

Staging ENVs with Vercel

Previous setup

Vulnerability in main repository

Sponsorship from Vercel

Theme updates

Paginating author pages (#7)

Shortcut commands (#10)

Copy button for code blocks (#1)

Spam comments

Other updates

Stats

Open Source

Google Analytics

Organic Stats

Final Words

Kotlin: Multi-dimensional Arrays

Pre-requisites

2D Arrays in Kotlin

2D Arrays with pre-defined data

2D arrays with dynamic size

N-Dimensional Arrays in Kotlin

Conclusion

How to Create a Pull Request in GitHub *Correctly*

1. Fork the Repository

2. Clone the Repository

3. Create a New Branch

4. Make Changes

5. Commit your changes

6. Push changes to your fork

Additional Note:

7. Make the PR

(Optional) Useful Information

I forgot to make some required changes but made a PR, do I have to make a new one now?

Why do we create a new branch in the first place?

How to Create a Pull Request in GitHub Correctly

Coding the `MainActivity`