Add “Sign in with Github” in one click to authorize your Github OAuth App and access Github REST API using Cotter and Next.js.

Cotter just launched a Github Login integration 🎉. This means you can easily log your users in and get an access token to enable Github integrations in your app.

What we’re building

We’re going to build a website with Next.js that allows your users to login with email or with Github accounts and get a list of their public and private repositories.


We learned how OAuth 2.0 works in general in What on Earth is OAuth? and learned how to securely store access tokens in the front end. In this post, we’ll learn which OAuth 2.0 flow you should use based on what you’re building.

OAuth 2.0 Recap:

In general, the OAuth 2.0 flow looks like this diagram below (if you’re not familiar with the OAuth 2.0 Flow below, check our explanation here).


We went over how OAuth 2.0 works in the last post which covered how to generate access tokens and refresh tokens. What’s next is how do you store them securely in your front-end?

A Recap about Access Token & Refresh Token

Access tokens are usually short-lived JWT Tokens, signed by your server, and is included in every HTTP request to your server to authorize the request.

Refresh tokens are usually long-lived opaque strings stored in your database, used to get a new access token when it expires.

Where should I store my tokens in the front end?

There are 2 common ways to store your tokens: in localStorage or cookies. …


Get a quick intro on what OAuth 2.0 is and how signing in with OAuth 2.0 works — explained in simple terms using Google Sign In as an example.

We’re excited to tell you that Cotter now generates access tokens and refresh tokens on authentication. Let’s first go over the concepts of OAuth 2.0 and the tokens before we jump in on how to use it.

Overview

  1. What is OAuth 2.0
  2. OAuth 2.0 in Action
  3. OAuth Tokens: Short-lived access tokens and long-lived refresh tokens
  4. How to Implement OAuth 2.0 for your site

What is OAuth 2.0?

OAuth 2.0 is an authorization framework that defines…


When building an app, it’s often a requirement to make sure your users are real and you want to know if they own the email or phone number that they signed up with so you can communicate via those channels.

In this tutorial, we’ll build a flutter app that allows users to sign up and sign in with their email or phone number.

In this post:

Create a Flutter App

If this is your first time making a Flutter app, check out…


If you’re building an app, starting with the increasingly popular passwordless login is the way forward — it’s secure, easy, and frictionless for the user.

In this tutorial, we’ll create a Flutter app from scratch that allows users to sign in with their device.

How it works.

When a user first signs up, we’ll automatically trust the current device. This means that the user can automatically log in when accessing your app from this device. When the user wants to access the app from another device, the user can simply tap a prompt in your app to approve the login request.

Create a Flutter App

If this…


How do you log your users in and how do you give them access? We’ll go over how to authenticate and authorize users without passwords in Next.js.

NextJS Video Tutorial

When you start adding users to your website, the main question that you need to answer is: how do you log your users in and how do you give them access to the appropriate resources?

In this tutorial we’ll go over how to address both questions and build a Next.js app that only allows logged-in users to access private resources within the app.

So you want to have users.

Let’s go over some concepts: authentication vs…


In this tutorial, we’ll create a new Angular website and add a simple email and phone number verification. To verify the user’s phone number, we’ll give the options to send the code via SMS or WhatsApp.

Get Started

We’ll be using this CodeSandbox so you can try it out without any setup.

If you want to make a new Angular app locally, first install the cli

then create a new Angular app:

Verifying user’s Email

Let’s start by verifying the user’s email before we jump to sending SMS or WhatsApp messages.

Installing Dependencies

Cotter is already added to the CodeSandbox above. …


We’ll go over how to build a React Native app and allow users to “Sign in with device”.

We’ll build a simple React Native app that allows your users to Sign In with Device. To follow along with this tutorial, you’ll need to install Xcode or Android Studio.

Create a New React Native App

We’ll name our app the Penguin App. To create a new app:

Run the app with react-native run-ios or react-native run-android .

Styling our App.js

Let’s add an email input field, a Register button, and a Sign In button. Copy the code below into your App.js.

Signing users in using their device

Install Dependencies

(Optional) Check out additional steps…

Putri Karunia

Co-Founder at Cotter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store