WebID Federation Pt. 1 - Setup & Google IDP
Tags: beginners, tutorial, cloud, showdev
Published: 2022-11-23 18:39:12

_Create the back-end for a simple "Sign in with Google" web app_

![One of the most recognizable brands in the world, Google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgbs27uu5i7jrnwt9jpk.png)

##What Is Identity Federation?
Identity federation is a fancy word for using a third-party, like Google or Apple, to sign in to a website. It makes the process of creating an account on a mobile app or website easier and with the right directory management software, can make it easier than creating an in-house solution.

Doesn't it  seem as if almost every website under the sun has a *Sign in with Google* button? Wouldn't it be easier to create your own system to validate users? Well, it turns out that that's not necessarily true. AWS, and I'm sure Azure and Google, have a service called AWS Cognito which is all about making use of *federated identities.*

###The AWS Solution
Cognito allows for identity federation from a host of providers, like Facebook, Google, Twitter, SAML 2.0 compatible, and Cognito user pools. Cognito is also serverless, which means you only get billed for what you use.

![All the money you save by utilizing serverless infrastructure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74p1u3l05rg8pqpwk3wo.png)

###How Does Cognito Work?
Users will sign on with an identity provider like Google and Google will send a token that says the user is who they claim they are. This token gets sent to AWS Cognito and will swap the Google token for AWS credentials and allow the user to assume a role.

---

##The Problem
I want to let other people sign on with Google and access a few photos of my dog, Kevin. He's a Shih-Tzu miniature Poodle mix and is absolutely adorable. 

The problem is that his photos are locked in an S3 bucket and only people who have authenticated themselves with Google can view these images. 


![AWS Cognito logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gkeakt5yvvxs7yfw8z5.png)

###Prerequisites
📍Google Account
📍AWS Account
📍Two S3 Buckets 
>- one bucket with the [web-app html](https://webidf-appbucket-3bfh54fx4mnh.s3.amazonaws.com/index.html) and [javascript](https://webidf-appbucket-3bfh54fx4mnh.s3.amazonaws.com/scripts.js) that's set to be accessible by the public and static-website hosting turned on and a bucket policy that allows for anyone to get the objects from the bucket
>- another bucket with the images you want to show the world that has public access blocked but with cross-origin resource sharing enabled for all headers with GET and HEAD methods allowed, from all origins, and exposing headers.

📍CloudFront distribution
>- The web-app bucket should be set as the origin

📍IAM policy 
>- ListBucket & GetObject on the web-app bucket and any objects within

###Creating the Google OAuth Token
<img width="100%" style="width:100%" src="https://media.giphy.com/media/GVZER56tQ5BVC/giphy.gif">
*I thought this was an AWS tutorial?*

Since we're going to be using Google as our identity provider, we have to enable some things on the Google side.

1. [Go to the Google Cloud Platform website](https://cloud.google.com/), sign-in to a Google account, and head to the GCP console.

2. On the top bar, click the drop down and then click, "New Project."
![Drop down](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlub3v2u57ngt5vlhxnr.png)

3. Give the project a name and click the blue create button.

4. Make sure drop down lists the project that was just created, then click the navigation menu and navigate to _APIs and Services_, then click _OAuth consent screen._ 
![OAuth consent screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl1x0n7p2tb40im0glnc.png)

5. Since we want to allow anybody to access the sign-in, click _External._

6. Enter your app name, provide a name under _user support email_, and enter an email under _developer email_. Then continue past the _Scopes_, _Test users_ pages, and _Summary_ screens.

7. Now click _Credentials_ on the side bar and click _+ Create Credentials_ and then click _OAuth client ID._
![Navigating to create OAuth credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cw49cems7hh87fafteqw.png)

8. Click the drop down and click _Web application,_ enter a name, and then under _**Authorized JavaScript origins**_, add the URI of the CloudFront distribution noted in the prerequisites. 
This means navigating to AWS -> CloudFront -> Distribution -> Distribution created as prerequisite -> Copy distribution domain name -> Paste into _Authorized JavaScript origins._
![CloudFront distribution URI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a3zs28crk8j3k6fra37.png)

9. Make note of your client ID

---

##Wrap Up
This is the end of part one of implementing a simple web identification federation application. The final portion, part two, will be posted either this upcoming Friday/Saturday. Have a great Thanksgiving!

<img width="100%" style="width:100%" src="https://media.giphy.com/media/uaqGoURxE9TNe2QPWg/giphy.gif">