Netlify Identity not working when using Edge Functions

[imjuniper]

Describe the bug

When using adapter-netlify and enabling the experimental Edge Functions, Netlify Identity doesn't work. The https://example.com/.netlify/identity path gets a 404 from SvelteKit, but it should be handled by Netlify (or at least I think so).

Using the adapter without the Edge Functions enabled doesn't break Netlify Identity.

Reproduction

Stackblitz fork.

1. Create a project on Netlify.
2. Enable Identity and Git Gateway.
3. Try to login at /admin (or invite yourself and try to accept the invite)

Logs

The Firefox browser console shows `[XHR] GET https://example.com/.netlify/identity/settings [HTTP/2 404 Not Found 31ms]`

System Info

System:
  OS: macOS 12.4
  CPU: (8) arm64 Apple M1
  Memory: 81.97 MB / 16.00 GB
  Shell: 5.8.1 - /bin/zsh
Binaries:
  Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
  Yarn: 1.22.15 - /opt/homebrew/bin/yarn
  npm: 8.5.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
Browsers:
  Chrome: 102.0.5005.115
  Firefox: 101.0.1
  Safari: 15.5
  Safari Technology Preview: 15.4
npmPackages:
  @sveltejs/adapter-netlify: next => 1.0.0-next.64 
  @sveltejs/kit: next => 1.0.0-next.350 
  svelte: ^3.48.0 => 3.48.0

Severity

annoyance

Additional Information

No response

[benmccann]

@ascorbic perhaps you might have some idea if there's some support we're missing?

[brittneypostma]

Does the project build okay then? Only 404's when the site is live and trying to hit that endpoint?

I'm wondering if a redirect would work here as a workaround. I'll dig more into it, but this might be a temp fix.

• Create a route /admin
• Inside routes/admin create a +page.server.ts file with the following:

import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
	throw redirect(
		301,
		'https://example.com/.netlify/identity'
	);
};

• In netlify.toml:

[[redirects]]
  from = "/admin"
  to = "https://example.com/.netlify/identity"

[imjuniper]

The project did build okay the last time I tested it, but I haven't messed with that in a while now. I can repro my old project (with updated dependencies) some time this week to verify it it still causes issues.

[brittneypostma]

The project did build okay the last time I tested it, but I haven't messed with that in a while now. I can repro my old project (with updated dependencies) some time this week to verify it it still causes issues.

Okay, I'm going to look into this. One thing I noticed is that @sveltejs/adapter-netlify was not installed and specified in the svelte.config.js file in the Stackblitz reproduction. The adapter-auto does not look at the configuration, so it would not pick up edge: true in the adapter config.

[imjuniper]

I'm pretty sure my actual project had adapter-netlify, but I don't have the original project anymore

[imjuniper]

I can confirm the issue is still occurring. It works on this commit, but not this one. Navigating to /admin is fine, but the login doesn't work.

[adamjkb]

This is kind of an issue how edge functions are handled by Netlify. Issue is that by using ^/.*$ regex in the manifest.json you will catch all the request and pipe them through Sveltekit. With lambda functions this is fine, and /.netlify/* doesn't get caught.

(I opened at Netlify's forum but their soution is a bit overcomplicated imho: https://answers.netlify.com/t/how-to-use-netlify-identity-with-edge-functions-sveltekit/75634)

I wrote a very dirty solution for it. I'm replacing the regex pattern created by the adapter to ^/[^.].*$. This way all the routes starting with . will not get caught by the edge function. This awful solution comes with a caveat that the aformentioned regex excludes / too... So unless you prerender the home page anyway this would break your app. There might be a better regex for this but since edge functions doesn't support look aheads I couldn't think of a better one. (https://docs.netlify.com/edge-functions/create-integration/#generate-declarations)

Here is how I did this with a onBuild build plugin:

import { readFile, writeFile } from 'fs/promises'

/**
 * Keep /.netlify/* endpoints getting caught by edge function pattern
 */
export const onBuild = async function ({ build }) {
	try {
		const file = await readFile('.netlify/edge-functions/manifest.json', {encoding: 'utf8'}).then(s => JSON.parse(s))
		// https://regex101.com/r/ldVrTI/1
		// This will actually ignore all routes starting with ".". => /.*/*
		file.functions[0].pattern = '^/[^.].*$'
		await writeFile('.netlify/edge-functions/manifest.json', JSON.stringify(file))
	} catch (err) {
		build.failBuild(err)
	}
}

[ascorbic]

We're adding support for negative matchers. It's currently experimental, but can add it to the adapter when it's a stable. It would be good to think of which other routes would need excluding.

[kylesloper]

Any updates on this, I can't see any workaround documented

[hrishikesh-k]

A workaround is listed here: https://github.com/sveltejs/kit/issues/10584 (point 4 of alternatives considered)

EDIT: Looks like this is already mentioned above