Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Netlify Identity not working when using Edge Functions #5235

Open
jakobbouchard opened this issue Jun 21, 2022 · 10 comments · May be fixed by #12052
Open

Netlify Identity not working when using Edge Functions #5235

jakobbouchard opened this issue Jun 21, 2022 · 10 comments · May be fixed by #12052

Comments

@jakobbouchard
Copy link

jakobbouchard commented Jun 21, 2022

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

@jakobbouchard jakobbouchard changed the title Netlify Identity not working when using edge functions Netlify Identity not working when using Edge Functions Jun 21, 2022
@benmccann
Copy link
Member

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

@Rich-Harris Rich-Harris added this to the whenever milestone Jul 20, 2022
@brittneypostma
Copy link
Contributor

brittneypostma commented Oct 17, 2022

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"

@jakobbouchard
Copy link
Author

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
Copy link
Contributor

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.

@jakobbouchard
Copy link
Author

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

@jakobbouchard
Copy link
Author

jakobbouchard commented Dec 21, 2022

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
Copy link
Contributor

adamjkb commented Jan 28, 2023

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
Copy link
Contributor

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
Copy link

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

@hrishikesh-k
Copy link

hrishikesh-k commented Dec 29, 2023

A workaround is listed here: #10584 (point 4 of alternatives considered)

EDIT: Looks like this is already mentioned above

serhalp added a commit to serhalp/sveltejs-kit that referenced this issue Mar 21, 2024
Generate an edge function config that ignores the `.netlify` path
(actually, any root path starting with `.`).

This avoids conflicts with things like Netlify Identity.

Fixes sveltejs#5235.
serhalp added a commit to serhalp/sveltejs-kit that referenced this issue Mar 21, 2024
Generate an edge function config that ignores the `.netlify` path
(actually, any root path starting with `.`).

This avoids conflicts with things like Netlify Identity.

Fixes sveltejs#5235.
serhalp added a commit to serhalp/sveltejs-kit that referenced this issue Mar 28, 2024
serhalp added a commit to serhalp/sveltejs-kit that referenced this issue Mar 28, 2024
serhalp added a commit to serhalp/sveltejs-kit that referenced this issue Mar 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants