Auth0 SSO Example

SSO This guide provides a complete, step-by-step walkthrough for integrating FanFest SSO using Auth0 as your identity provider.

Prerequisites

• An Auth0 account (sign up for free at auth0.com)
• A FanFest account with channel admin access to use the SSO Management dashboard
• A deployed website with a valid SSL certificate (https://) — referred to as Your Website throughout this guide

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

This application allows the FanFest API to authenticate users through Auth0.

1. Log in to your Auth0 dashboard.
2. Navigate to Applications and click Create Application.
   • Select Regular Web Application as the application type.
3. Navigate to the Settings tab of your newly created application.
4. Set the following fields:
   • Allowed Callback URLs:

     https://6c8kp9bzu6.execute-api.eu-west-1.amazonaws.com/staging/auth/callback

   • Save changes.
5. Note down the Domain, Client ID, and Client Secret from the application settings. You will need these in Step 3.

Step 2: Create an Auth0 Application for Your Website

This application handles login on your website. It is a separate application from the one in Step 1.

1. In your Auth0 dashboard, navigate to Applications and click 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 new SPA application.
5. Configure the following fields (replace https://your-domain.com/ with your actual website URL):
   • Allowed Callback URLs: https://your-domain.com/
   • Allowed Logout URLs: https://your-domain.com/
   • Allowed Web Origins: https://your-domain.com/
6. Scroll down to Advanced Settings and expand it.
7. Navigate to the Grant Types tab and ensure the following are enabled:
   • Authorization Code
   • Refresh Token
8. Click Save Changes.
9. Note down the Domain and Client ID from this SPA application settings. You will need these in Step 6.

Step 3: Configure the OAuth Server in FanFest

Set up the Auth0 provider in the FanFest SSO Management dashboard. Use the credentials from Step 1.

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

2. Select Provider Catalogs on the sidebar.

3. Click Add Catalog and fill in:

   • Catalog Key: auth0-demo
   • Display Name: Auth0 Demo

4. Click Save.

5. From the Catalogs list, click the View Releases button for your new catalog.

6. Click Add Release and fill in:

   • Version: 1.0.0
   • Release Status: Select Published
   • Fill in the OIDC endpoints using your Auth0 domain:

   Endpoint	URL
   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

7. Click Save.

Step 4: Configure the OAuth Provider Secrets in FanFest

Link the Auth0 client credentials to the provider release.

1. From the SSO Management sidebar, select OAuth Providers.
2. Click Add OAuth Provider and fill in:
   • Provider Release: Select Auth0 Demo - v1.0.0 (published)
   • Client ID: The Client ID from your Auth0 application (Step 1)
   • Client Secret: The Client Secret from your Auth0 application (Step 1)
   • Scopes: openid profile email
   • Allowed Redirect URIs: The URL of Your Website (https://)
3. Click Save.

Step 5: Create a Web App in FanFest

Create a Web App that ties the OAuth Provider to your website and generates the App ID for the SDK.

1. From the SSO Management sidebar, select Web Apps.
2. Click Add Web App and fill in:
   • Application Name: Auth0 Demo Web App
   • OAuth Provider: Select Auth0 Demo - v1.0.0 (published)
   • Requires PKCE: Leave checked
   • Allowed Scopes: openid profile email
3. Click Save.
4. From the Web Apps list, click the Manage Origins button for your new web app.
5. Click Add Origin and paste the URL of Your Website (https://).
6. Click Save.
7. Note down the App ID from the Web Apps list. This is the clientId for the SDK.

Step 6: Integrate the FanFest SDK into Your Website

Add the Auth0 SPA SDK and the FanFest SDK to your website. Replace the placeholder values:

• YOUR_AUTH0_CLIENT_ID — Client ID from the Auth0 SPA application (Step 2)
• YOUR_AUTH0_DOMAIN — Domain from the Auth0 SPA application (Step 2)
• YOUR_WEB_APP_ID — App ID from the FanFest Web App (Step 5)

<!-- Auth0 SPA SDK -->
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>

<!-- Login and Logout buttons -->
<button id="login-button">Login</button>
<button id="logout-button" style="display: none;">Logout</button>

<script type="text/javascript">
  const logoutButton = document.querySelector("#logout-button");
  const loginButton = 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;

          loginButton.style.display = "none";
          logoutButton.style.display = "block";

          const 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();
        }

        // Handle the Auth0 redirect callback
        const query = window.location.search;
        if (query.includes("code=") && query.includes("state=")) {
          await this.client.handleRedirectCallback();
          this.onLoggedIn();
          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;
    })();

    logoutButton.style.display = "none";
    loginButton.style.display = "block";

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

<!-- FanFest SDK -->
<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;

    // Optional: Register action mappings for loyalty points
    const engagementActionToChannelActionId = {
      READ_ARTICLE: "fanfestfc_READ_ARTICLE",
    };
    FanFestSDK.registerActionMapping(engagementActionToChannelActionId);

    // Initialize the SDK with SSO configuration
    FanFestSDK.init({
      clientId: "YOUR_WEB_APP_ID",
      iframe: {
        backgroundColor: "#000",
      },
      hostLoginFn: () => {
        // Trigger Auth0 login when unauthenticated users try to claim rewards
        window.Auth.login();
      },
      hostRewardsFn: () => {
        // Navigate to your rewards page (customize as needed)
      },
    });

    // Notify the SDK when the user logs in via Auth0
    window.Auth.addLoginListener(() => {
      FanFestSDK.login();
    });
  });
</script>

Script Order

Make sure to include the scripts in this order:

1. Auth0 SPA SDK
2. Auth0 initialization code
3. FanFest SDK
4. FanFest initialization code with addLoginListener

Placeholder Values

Replace these placeholders before deploying:

• YOUR_AUTH0_CLIENT_ID — from Step 2
• YOUR_AUTH0_DOMAIN — from Step 2
• YOUR_WEB_APP_ID — from Step 5

Step 7: Test the Integration

1. Open Your Website in a web browser.
2. Click the Login button.
3. You should be redirected to the Auth0 login page. Enter your credentials.
4. After successful authentication, you should be redirected back to Your Website:
   • The Login button should be hidden
   • The Logout button should be visible
5. The FanFest embed should recognize the user — personalized content and reward claiming should work.
6. Click Logout and verify that the user returns to anonymous mode in the FanFest embed.

Debugging

Open your browser's developer console and look for FanFest SDK log messages:

• Initiating silent authentication — the SDK is starting the OIDC flow after login() was called
• Validated authentication — the silent auth completed and the user is identified
• Any error messages from the Auth0 SPA SDK or the FanFest SDK

Next Steps

• Learn how user identification works — understand the silent auth flow and what data is synced
• Set up event tracking — start tracking user engagement and rewarding your users for specific actions
• Configure action mappings — map your site's engagement actions to FanFest channel actions for loyalty points