swa emulator Error: Not Found

[jetilton]

I am having trouble with the Authorization and authentication emulation. My swa-cli.config.json looks like the below.

 {
	"configurations": {
		"app": {
			"outputLocation": "./build/static",
			"apiLocation": "./build/server",
			"appDevserverUrl": "http://localhost:5173",
			"run": "npm run dev"
		}
	}
}

Everything looks good when I execute swa start, but I receive a Not found: /.auth/me when I try to go to any authentication endpoint. Is there some other configuration I am missing?

swa] Found configuration file:
[swa]   /build/staticwebapp.config.json
[swa] 
[swa] - Waiting for http://localhost:5173 to be ready
[run] 
[run]   VITE v4.0.3  ready in 944 ms
[run] 
[run]   ➜  Local:   http://localhost:5173/
[run]   ➜  Network: use --host to expose
[swa] ✔ Connected to http://localhost:5173 successfully
[swa] - Waiting for http://localhost:7071 to be ready
[api] 
[api] Functions:
[api] 
[api]   sk_render:  http://localhost:7071/api/__render
[api] 
[api] For detailed output, run func with --verbose flag.
[api] [2023-01-20T17:54:34.239Z] Worker process started and initialized.
[swa] ✔ Connected to http://localhost:7071 successfully
[swa] 
[swa] Using dev server for static content:
[swa]   http://localhost:5173
[swa] 
[swa] Serving API:
[swa]   /home/tilton/projects/investigative-solutions/inv-sol-app/build/server
[swa] 
[swa] Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit.
[swa] 
[swa] 
[api] [2023-01-20T17:54:38.964Z] Host lock lease acquired by instance ID '0000000000000000000000001F94B3AA'.
[run] Not found: /.auth/me
[run] Error: Not found: /.auth/me

[jetilton]

I was able to resolve the issue by adding http://localhost:4280/.auth/ to all of the auth endpoints.

[geoffrich]

Thanks for the report! A better solution would be to put data-sveltekit-reload on those links to instruct SvelteKit not to handle them - in production, you won't want localhost on those links.

[jetilton]

Can you expand on this @geoffrich? I tried <a data-sveltekit-reload href="/.auth/login/aad?post_login_redirect_uri=/">Login</a>, but am still getting a not found error.

[geoffrich]

Ah apologies, I misunderstood your setup - you shouldn't need data-sveltekit-reload. The root issue is that you're browsing the site on SvelteKit's dev server (localhost:5173), but the SWA emulator is running on localhost:4280. This is why you need to add localhost:4280 to the auth links that use SWA for authentication -- localhost:5173/.auth/me returns 404 since SvelteKit doesn't know about that route.

I guess that works, but it's a bit awkward. You could also browse the entire site on localhost:4280, but that won't update when you make changes in development -- you'll have to run npm run build every time something changes (see also: #96).

You may want to consider making localhost:4280 an environment variable when running locally, so that it won't show up on your production site. Something like this:

# .env
PUBLIC_AUTH_BASE=http://localhost:4280

<script>
  import { env } from "$env/dynamic/public";
</script>

<h1>Hello world!</h1>
<a href="{env.PUBLIC_AUTH_BASE || ''}/.auth/login">Login</a>

That being said, I haven't done anything with SWA auth + SvelteKit myself, so I've opened #102 to better understand what this adapter can support and what it can't.