The `@verida/account-web-vault` package doesn't work in a Next.js application by default

[andy-verida]

Issue

When implementing Verida SSO on a Next.js app, we install the @verida/account-web-vault dependency. Upon running the application, there's an error loading the Sora font used by the login modal.

Workaround

Update the Next.js configuration to support loading static font files.

• Install file-loader

  yarn add -D file-loader

• In the file next.config.mjs

  
  const nextConfig = {
  webpack: (
  config,
  { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
  config.module.rules.push({
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        publicPath: '/_next/static/fonts/',
        outputPath: `${isServer ? '../' : ''}static/fonts/`,
      },
    },
  });
  
  return config;
  }
  }

### Some solutions
- Create an instruction for Next.js users
- Create a dedicated @verida/account-web-vault-nextjs
- How to identify a Next.js application and handle it in the code (not sure we can do that)

[andy-verida]

Another issue, by default the login modal shows 2 QR codes at once, and the layout is broken.

[aurelticot]

@andy-verida what's the error with the font? Is the error raised by Next or is it the browser saying the font is missing? Or "just" the layout/content is broken?

In any case the modal should define the font-family with Sora as the first one but also generic names as fallback (like "sans-serif"), so that if the Sora font is not available, the browser will be able to manage.

Then, as the modal tries to load the Sora font from a certain URL. Yes, we could find a way that works for both Next and other implementation, and/or we could load the font from a external CDN. If the above doesn't work, then we could give some instructions for developers integrating on Next.

[andy-verida]

@aurelticot for now the app won't be built without that Next.js config. I agree changing the font to load from CDN and having a fallback font is a better approach.