HOC for Apps in iframe

[unsphere]

Hi there,

I want to share my hoc that I had to create for my app to support authentication for my embedded protected pages.

I use the suggested Storage Access API that is supported for Safari, Firefox, and Edge. Chrome and others will follow in 2022 I guess.

Using this API makes it possible to use cookies inside an iframe so that next auth works fine.

So basically what we have to do is:

1. Check if we have access to cookies with hasStorageAccess
2. If access then show login button and open a new tab for OAuth else show button to let the user give access to cookies with requestStorageAccess
3. OAuth in new window and reload opener iframe panel
4. See that cookies are there and session is persistent if the user reloads iframe

It even works if the user checked Safari's preventing cross-site tracking and Firefox's Strict Enhanced Tracking Protection (see screenshot below).

When this protection is enabled the user has to allow cookie access every time the panel is reloaded (applies only for Safari / Firefox remembers cookie access) but will be logged in directly if the session is not expired. Perhaps this can be made even better. But it works though. Maybe we can ask the user to turn this off and let them know that it will come up every time when you render the allow button.

ITP limits your cookie expiry to 7 days. So you can persist the session at least for 7 days which is fine.

Let me know if I missed or can improve something and feel free to use it in your project :)

// hocs/withAuth.js
import React, { useState, useEffect } from 'react';
import { useSession, signIn } from 'next-auth/client';

//detect browser, maybe better to use a lib for this
const useBrowser = () => {
  if (typeof window === 'undefined') return null;

  let browser;
  const userAgent = window.navigator.userAgent;
  if (userAgent.indexOf('Firefox') > -1) {
    browser = 'Firefox';
  } else if (userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1) {
    browser = 'Opera';
  } else if (userAgent.indexOf('Trident') > -1) {
    browser = 'Internet Explorer';
  } else if (userAgent.indexOf('Edge') > -1) {
    browser = 'Edge';
  } else if (userAgent.indexOf('Chrome') > -1) {
    browser = 'Chrome';
  } else if (userAgent.indexOf('Safari') > -1) {
    browser = 'Safari';
  } else {
    browser = 'Unknown';
  }

  return browser;
};

//check if Storage Access API is supported by the browser and has access otherwise check if cookies are enabled
const hasCookiesEnabled = async () => {
  if (document.hasStorageAccess && document.requestStorageAccess) {
    return await document
      .hasStorageAccess()
      .then((hasAccess) => hasAccess)
      .catch((_) => false);
  }
  return window.navigator.cookieEnabled;
};

//Higher-Order Component with custom options
const withAuth = (Component, options) => {
  return (props) => {
    const browser = useBrowser();

    const [session, loading] = useSession();

    const [checking, setChecking] = useState(true);
    const [hasCookieAccess, setHasCookieAccess] = useState(false);

    //check if we can request storage access else notify the user to allow cookies via settings
    const handleCookieAccess = async () => {
      if (document.requestStorageAccess) {
        await document.requestStorageAccess().then(
          () => {
            //now we have access and reload the page to see if we have a session or have to login
            location.reload();
          },
          () => {
            alert('Cookie access denied. Please allow!');
            //or change state to display something on the page
          }
        );
      } else {
        alert('Please allow cookies in your settings');
        //or change state to display something on the page
      }
    };

    //open new tab or popup window for oauth if we have to set cookies in first party context. notify user if we are unable to open new tab
    const handleLogin = () => {
      const newWindow = window.open(
        `${process.env.NEXT_PUBLIC_URL}/login?callbackUrl=${window.location.href}`,
        '_blank'
      );
      try {
        newWindow.focus();
      } catch {
        alert(
          'Pop-up Blocker is enabled! Please add this site to your exception list.'
        );
        //or change state to display something different on the page
      }
    };

    //check cookie access on load
    useEffect(() => {
      async function checkCookieAccess() {
        await hasCookiesEnabled().then((enabled) => {
          if (enabled) {
            setHasCookieAccess(true);
          }
        });
        setChecking(false);
      }
      checkCookieAccess();
    }, []);

    //show loading indicator on initialization
    if (typeof window === 'undefined' || loading || checking) {
      return <div>Loading...</div>;
    }

    //if this page was opened by our iframe we were able to set cookies. so we have to reload the iframe and the user is logged in. finally close the tab.
    if (window.opener) {
      window.opener.location.reload();
      window.close();
      return <div>Loading...</div>;
    }

    //if we have no cookie access let the user do an interaction to allow cookies
    if (!hasCookieAccess) {
      return (
        <button onClick={handleCookieAccess}>
          We need cookies to work! Please click here to allow
        </button>
      );
    }

    //if the user is not logged in check if we are not in an iframe or that the browser dont need first party context then redirect inside the iframe else let the user do an interaction to open oauth in new tab
    if (!session) {
      if (
        window.top === window.self ||
        !['Safari', 'Firefox', 'Edge', 'Unknown'].includes(browser) //In this browsers we have to set cookies in first-party context, therefore we are not able to redirect without user interaction
      ) {
        signIn('superoffice'); //start oauth for my custom provider
        return <div>Loading...</div>;
      } else {
        return <button onClick={handleLogin}>Login</button>;
      }
    }

    //if our component has a custom option admin check if user is admin otherwise render access denied
    if (options?.admin && !session.user.admin) {
      return <div>Access denied! Only your admin can see this page.</div>;
    }

    return <Component {...props} />;
  };
};

export default withAuth;

You can wrap your protected components like that:

export default withAuth(MyProtectedPage);

or

export default withAuth(MySuperProtectedPage, { admin: true, ...otherOptions });

Here is my login route that I point to new window which initiates oauth:

// pages/login.js
import React, { useEffect } from 'react';
import { getSession, signIn } from 'next-auth/client';

export default function Login({ callbackUrl }) {
  useEffect(() => {
    if (typeof window === 'undefined') return;
    signIn('superoffice', {
      callbackUrl,
    });
  }, []);

  return <div>Loading...</div>;
}

export async function getServerSideProps(context) {
  const { callbackUrl } = context.query;

  return {
    props: {
      callbackUrl: callbackUrl || `${process.env.NEXT_PUBLIC_URL}/admin`,
    },
  };
}

And here are my cookie settings. Make sure to encrypt your session token cookie, because we have to set sameSite none to make it available for iframes.

    cookies: {
      sessionToken: {
        name: `__Secure-next-auth.session-token`,
        options: {
          path: '/',
          httpOnly: true,
          sameSite: 'none',
          secure: true,
        },
      },
      callbackUrl: {
        name: `__Secure-next-auth.callback-url`,
        options: {
          path: '/',
          sameSite: 'none',
          secure: true,
        },
      },
      csrfToken: {
        name: `__Host-next-auth.csrf-token`,
        options: {
          path: '/',
          httpOnly: true,
          sameSite: 'none',
          secure: true,
        },
      },
    },

And here is a screenshot proof:

Example video without "Prevent cross-site tracking": https://recordit.co/jom3dehnDX
Example video with "Prevent cross-site tracking": https://recordit.co/jom3dehnDX

[balazsorban44]

the year is 2021 (you wrote 2020)...😂 but I guess it stopped for most of us last year... 🤪

facebook/react@7c4e6aa

Looks like a nice work otherwise!

[unsphere]

haha thanks. It's high time for bed xD

[SuperOfficeDevNet]

Hi @unsphere!

Would you be interested in sharing a minimalist example in a repo in the SuperOffice organization? I would be happy to create a repo there for you to be the main contributor on. Alternatively, create a repo under your GitHub account and from which we could fork?

Is that something you would be interested in?

[raverecursion]

It's 10/2002 and Storage Access API still unsupported in Chromium browsers.

[karar-shah]

@unsphere do you have a working repo for this. I am having issue while making sameSite: "none", in NextAuth.js despite I updated the cookie code as in the docs. If i create custom cookies then its fine but when nextauth does it keeps 'lax'!!!

export const { auth, handlers, signIn, signOut } = NextAuth({
  events: {},
  callbacks: {
    async jwt({ token, user, session }) {
},
    async session({ token, user, session }) {
      return session;
    },
  },
  session: { strategy: "jwt" },
  cookies: {
    sessionToken: {
      name: `__Secure-next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: "none",
        path: "/",
        secure: true,
      },
    },
    callbackUrl: {
      name: `__Secure-next-auth.callback-url`,
      options: {
        sameSite: "none",
        path: "/",
        secure: true,
      },
    },
    csrfToken: {
      name: `__Host-next-auth.csrf-token`,
      options: {
        httpOnly: true,
        sameSite: "none",
        path: "/",
        secure: true,
      },
    },
  },
  ...authConfig,
});

[zamiang]

I've been using the JWT method instead of this HOC for supporting an iframe since I need to support chrome. Is there any downside to using JWTs over this HOC?

In short,

• when rendering the page, use getToken in getServerSideProps with raw set to true
• pass the token to the frontend
• use the token in headers for API requests ie: Authorization: Bearer ${JWT}`
• in the API handler, use const token = await getToken({ req });

[seeratawan01]

@unsphere how do you encrypt session token cookies, aren't they already encrypted?