Auth0 Setup

Setup the configuration to allow the FanFest API to authenticate users via your identity provider (Auth0).

Prerequisites

• An Auth0 account. If you don't have one, you can sign up for free at Auth0.
• A FanFest account with (channel) admin access to a channel, in order to use the SSO Management dashboard. If you don't have one, you can sign up at FanFest and request one via the support chat.
• A deployed website with a valid SSL certificate (https://) that you'll be able to update to integrate the FanFest SDK and setup SSO for; for the purposes of this guide, we'll call this Your Website.

Step 1: Create an Auth0 Application for FanFest's Identity Platform

1. Log in to your Auth0 dashboard.
2. Navigate to the "Applications" section and click on "Create Application". 2.1. Select "Regular Web Application" as the application type.
3. Navigate to "Settings" tab of your newly created application.
4. Set the following fields:
   1. Allowed Callback URLs: https://6c8kp9bzu6.execute-api.eu-west-1.amazonaws.com/staging/auth/callback
   2. Save changes.
5. Note down the Domain, Client ID and Client Secret from the application settings (you'll need these in Step 4).

Step 2: Create an Auth0 Application for Your Website

1. In your Auth0 dashboard, navigate to the "Applications" section and click on "Create Application".
2. Give it a name (e.g., "My Website SPA") and select Single Page Web Applications as the application type.
3. Click "Create".
4. Navigate to the "Settings" tab of your newly created SPA application.
5. Configure the following fields with your website's domain (replace https://your-domain.com/ with your actual website URL):
   1. Allowed Callback URLs: https://your-domain.com/
   2. Allowed Logout URLs: https://your-domain.com/
   3. Allowed Web Origins: https://your-domain.com/
6. Scroll down to the "Advanced Settings" section and click to expand it.
7. Navigate to the "Grant Types" tab and ensure the following are enabled:
   1. Authorization Code
   2. Refresh Token
8. Click "Save Changes" at the bottom of the page.
9. Note down the Domain and Client ID from this SPA application settings (you'll need these in Step 6).

Step 3: Configure the Oauth server in the FanFest dashboard

1. Log in to your FanFest account and from the channel admin tooltip, navigate to "SSO Management" (SSO Management).

2. Select "Provider Catalogs" (Provider Catalogs) on the sidebar.

3. Click on "Add Catalog" and fill in the data.

   1. Catalog Key: auth0-demo (this is a unique identifier, follow the naming convention of using lowercase letters and hyphens).
   2. Display Name: Auth0 Demo (this is a user friendly name for the dashboard, not show to users).

4. Click on "Save".

5. From the Catalogs list, click on the "Releases" button (with an eye icon) for the newly created catalog.

6. Click on "Add Release"

7. Fill in the data:

   1. Version: 1.0.0 (use Semantical versioning).
   2. Release Status: Select Published.
   3. Fill in Issuer URL, Authorization Endpoint, Token Endpoint and JWKS URI by following the next table:

   Endpoint	URL Format
   Issuer URL	https://<YOUR_AUTH0_DOMAIN>/
   Authorization Endpoint	https://<YOUR_AUTH0_DOMAIN>/oauth/authorize
   Token Endpoint	https://<YOUR_AUTH0_DOMAIN>/oauth/token
   JWKS URI	https://<YOUR_AUTH0_DOMAIN>/.well-known/jwks.json

8. Click on "Save".

Step 4: Configure the Oauth provider secrets in the FanFest dashboard

1. From the "SSO Management" sidebar, select "OAuth Providers" (Providers).
2. Click on "Add OAuth Provider" and fill the data:
   1. Provider Release: Select the previously created release: Auth0 Demo - v1.0.0 (published).
   2. Client ID: The Client ID from your Auth0 application.
   3. Client Secret: The Client Secret from your Auth0 application.
   4. Scopes: openid profile email (these scopes will allow you to retrieve the user's profile information).
   5. Allowed Redirect URIs: Paste the URL to Your Website and ensure that you're using the SSL-protected scheme (https://).
3. Click on "Save".

Step 5: Create a Web app in the FanFest dashboard

1. From the "SSO Management" sidebar, select "Web Apps" (Web Apps).
2. Click on "Add Web App" and fill the data:
   1. Application Name: Auth0 Demo Web App (this is a user friendly name for the dashboard, not show to users).
   2. OAuth Provider: Select the previously created provider: Auth0 Demo - v1.0.0 (published).
   3. Requires PKCE: Leave checked.
   4. Allowed Scopes: openid profile email (these scopes will allow you to retrieve the user's profile information).
3. Click on "Save".
4. From the Web Apps list, click on the "Origins" button (with a globe icon) for the newly created web app.
5. Click on "Add Origin" and paste the URL of Your Website with a valid SSL certificate (https://).
6. Click on "Save".

Step 6: Integrate the FanFest SDK into Your Website

Set the following snippet in the <body> of your website's HTML, replacing YOUR_WEB_APP_ID with the Web App ID from the previously created web app in the FanFest dashboard as well as AUTH0_DOMAIN and AUTH0_CLIENT_ID with the values from your Auth0 SPA application (created in Step 2):

<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
<script type="text/javascript">
  const logoutButton = window.document.querySelector("#logout-button");
  const loginButton = window.document.querySelector("#login-button");

  logoutButton.addEventListener("click", function () {
    window.Auth.logout();
  });

  loginButton.addEventListener("click", function () {
    window.Auth.login();
  });

  window.addEventListener("load", function () {
    window.Auth = (function () {
      function Auth() {
        const clientId = "YOUR_AUTH0_CLIENT_ID";
        const domain = "YOUR_AUTH0_DOMAIN";

        this.isLoggedInNow = false;

        this.client = null;

        this.clientPromise = auth0
          .createAuth0Client({
            domain: domain,
            clientId: clientId,
          })
          .then((client) => {
            this.client = client;
          });

        return this;
      }

      Auth.prototype.onLoggedIn = function () {
        this.getUser((error, profile) => {
          this.isLoggedInNow = true;

          // Hide the login button
          loginButton.style.display = "none";
          logoutButton.style.display = "block";

          logoutText = logoutButton.querySelector(".button__text");

          if (logoutText) {
            logoutText.innerHTML = "Logout from " + profile.name;
          }

          this.callListeners();
        });
      };

      const loginListeners = [];

      Auth.prototype.callListeners = function () {
        for (const callback of loginListeners) {
          callback();
        }
      };

      Auth.prototype.addLoginListener = function (callback) {
        loginListeners.push(callback);

        if (this.isLoggedInNow) {
          callback();
        }
      };

      Auth.prototype.authn = async function () {
        await this.clientPromise;
        const isAuthenticated = await this.client.isAuthenticated();

        if (isAuthenticated) {
          this.onLoggedIn();
        }

        // NEW - check for the code and state parameters
        const query = window.location.search;
        if (query.includes("code=") && query.includes("state=")) {
          // Process the login state
          await this.client.handleRedirectCallback();

          this.onLoggedIn();

          // Use replaceState to redirect the user away and remove the querystring parameters
          window.history.replaceState({}, document.title, "/");
        }
      };

      Auth.prototype.login = function () {
        this.client.loginWithRedirect({
          authorizationParams: {
            redirect_uri: window.location.origin,
          },
        });
      };

      Auth.prototype.logout = function () {
        this.client.logout({
          logoutParams: {
            returnTo: window.location.origin,
          },
        });
      };

      Auth.prototype.getUser = function (callback) {
        this.client
          .getUser()
          .then((user) => {
            callback(null, user);
          })
          .catch((error) => {
            callback(error, null);
          });
      };

      const auth = new Auth();

      return auth;
    })();

    // Show the right buttons from the get go.
    logoutButton.style.display = "none";
    loginButton.style.display = "block";

    window.Auth.authn();
  });
</script>

<script
  type="text/javascript"
  src="https://sdk.production.fanfest.vip/1.0.20/fanfest-sdk.js"
></script>

<script type="text/javascript">
  window.addEventListener("load", function () {
    const FanFestSDK = window.FanFestSDK;

    const engagementActionToChannelActionId = {
      READ_ARTICLE: "fanfestfc_READ_ARTICLE",
    };

    // Register action mapping
    FanFestSDK.registerActionMapping(engagementActionToChannelActionId);

    // Initialize with dev settings
    FanFestSDK.init({
      clientId: "YOUR_WEB_APP_ID",
      apiBase: "https://6c8kp9bzu6.execute-api.eu-west-1.amazonaws.com/staging",
      appOrigin: "https://staging.fanfest.io",
      iframe: {
        backgroundColor: "#000",
      },
      hostLoginFn: () => {
        window.Auth.login();
      },
      hostRewardsFn: () => {
        // Do nothing
      },
    });

    window.Auth.addLoginListener(() => {
      FanFestSDK.login();
    });
  });
</script>

The snippet above assumes that you have two buttons in your HTML with IDs login-button and logout-button for logging in and out, respectively. You can customize the button styles and placement as needed. Make sure to past the script in the provided order.

Step 7: Test the Integration

1. Open Your Website in a web browser.
2. Click on the "Login" button.
3. You should be redirected to the Auth0 login page. Enter your credentials to log in.
4. After successful authentication, you should be redirected back to Your Website, and the "Login" button should be invisible, and you should now see the logout button with the following text "Logout from [Your Name]".