This sample shows how to authenticate using Instagram Sign-In on Firebase. In this sample we use OAuth 2.0 based authentication to get Instagram user information then create a Firebase Custom Token (using the Instagram user ID).
1. Enable Billing on your Firebase the project by switching to the **Blaze** plan, this is currently needed to be able to perform HTTP requests to external services from a Cloud Function.
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).
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.