1. Create a Firebase project using the [Firebase Developer Console](https://console.firebase.google.com).
1. Enable Billing on your Firebase the project by switching to the **Blaze** plan, this is currently needed for
Firebase Functions.
1. Copy the Web initialisation snippet from **Firebase Console > Overview > Add Firebase to your web app** and paste it
in `public/index.html` and `public/popup.html` in lieu of the placeholders (where the `TODO(DEVELOPER)`
are located).
Create and provide a Service Account's keys:
1. Create a Service Accounts file as described in the [Server SDK setup instructions](https://firebase.google.com/docs/server/setup#add_firebase_to_your_app).
1. Save the Service Account credential file as `./functions/service-account.json`
1. Register an Instagram app on [Instagram for Developers](https://www.instagram.com/developer/). You'll need to **Register a New Client**.
1. Once Your app is created make sure you specify your app's callback URL in the list of **Valid redirect URIs** of your Instagram app. You should whitelist `https://localhost:5000/popup.html` for local development and if you deploy on App Engine (See Deploy section below) you should whitelist the URL `https://<application-id>.firebaseapp.com/popup.html`.
1. Copy the **Client ID** and **Client Secret** of your Instagram app and use them to set the `instagram.clientId` and `instagram.clientSecret` Google Cloud environment variables. For this use:
Click on the **Sign in with Instagram** button and a popup window will appear that will show the Instagram In authentication consent screen. Sign In and/or authorize the authentication request.
The website should display your name and profile pic from Instagram. At this point you are authenticated in Firebase and can use the database/hosting etc...
The `redirect` Function then redirects the user to the Instagram OAuth 2.0 consent screen where (the first time only) the user will have to grant approval. Also the `state` cookie is set on the client with the value of the `state` URL query parameter to check against later on.
After the user has granted approval he is redirected back to the `./popup.html` page along with an OAuth 2.0 Auth Code as a URL parameter. This Auth code is then sent to the `token` Function using a JSONP Request. The `token` function then:
- Checks that the value of the `state` URL query parameter is the same as the one in the `state` cookie.
The `./popup.html` receives the Custom Auth Token and other data back from the AJAX request to the `token` Function and uses it to update the user's profile, saves the access token to the database, authenticate the user in Firebase and then close the popup.