Backend for API Based Google OAuth2 with Rails + Devise

I recently implemented Google’s OAuth for a ReactNative mobile app and noticed that most of the existing documentation is meant to support the implementation of OAuth using a server side rendered web flow only. In this article, we will go over the nuances in the backend when developing a separate frontend application that uses an existing JWT authorization flow.

Image from Unsplash

Pre-Requisites

Before starting on this tutorial, ensure you have the following:

1. A ReactNative app that can make authenticated requests to your server using a JWT token retrieved from the header (or body) of specific requests such as /login.
2. A Ruby on Rails backend with an existing user model configured with the devise gem and with JWT support provided via the devise-jwt gem.

Introduction

The OAuth (Open Authorization) 2.0 protocol was developed as an open standard for access delegation in order to provide users a way to access information from one application within another without having to provide one of the application’s password to the other.

There are a few different implementation strategies such as the one represented in the image below where a client application authenticates with a provider (in this case Google), the client then sends information received from the provider to the application backend server which in turn verifies the information with the provider’s servers to confirm authenticity and reply to the client with the necessary auth information (such as a JWT token).

Google Oauth Flow between client, app server and Google services as described here.

Create OAuth Credentials in Google Cloud Console

Part 1: Create API Keys

We will create a total of three OAuth 2.0 Client IDs in the Google Cloud Console API & Services panel here as specified below:

1. iOS: Create using the Bundle ID of your app (com.myapp.staging). You will need this key for the iOS version of your app.
2. Web: Even though we will not have a web interface we will be…