Configure Amplify authentication with SvelteKit

How to configure amplify authentication with SvelteKit v1.0🚀 This walkthrough shows how to configure Amplify Auth with SvelteKit v1.0 in Typescript. I decided to release a mini-guide because there is no information about it.

⚠️ Hey! This blog post was initially published on my own blog. Check it out from the source: https://cloudnature.net/blog/configure-amplify-authentication-with-sveltekit

Figure 1: Amplify and SvelteKit logos

Installing SvelteKit

First we need to install SvelteKit, we can work with the default example.

npm create svelte@latest sveltekit-amplify
Need to install the following packages:
  create-svelte@2.3.0
Ok to proceed? (y)

create-svelte version 2.3.0

Welcome to SvelteKit!
√ Which Svelte app template? » SvelteKit demo app
√ Add type checking with TypeScript? » Yes, using TypeScript syntax
√ Add ESLint for code linting? ... Yes
√ Add Prettier for code formatting? ... Yes
√ Add Playwright for browser testing? ... No
√ Add Vitest for unit testing? ... No

Then we run

npm install 
npm install aws-amplify

Perfect everything is installed, let’s use Amplify.

AWS Exports

I won’t install Amplify using its CLI because we really just need to add a file and a few lines within the project.

So we need to create a file called aws-exports.ts within src/ folder. You can copy and then customize this configuration 👇

Amplify configure

Next step is adding Amplify configuration, to do it we need to change the file src/routes/+layout.ts and add this snippet as script 👇

Importing Amplify auth

then we need to import Auth amplify aws-amplify within the file src/routes/login/+page.svelte like so 👇

An voilà: ReferenceError: global is not defined ⚠️

How to fix “ReferenceError: global is not defined”?

We need to define a simple script to src/app.html 👇

Perfect, let’s write a simple page just to try out, we would use this function to signIn (or signUp whatever you prefer)

await Auth.signIn(username, password);

And finally we can signIn successfully this time! 🎉🎉

Figure 3: Cognito response after sign in

SvelteKit build

Finally let’s try to build the project by executing vite build and….
“request” is not exported by “__vite-browser-external”, imported by “node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js”.

How to fix “request” is not exported by “__vite-browser-external”?

We need to change vite configuration file named vite.config.ts like this 👇

Then hit vite build once again and… WE DID IT🍾🎉

Conclusion

In this posts we learnt how to configure Amplify Auth with SvelteKit, doing so we are able to integrate the authentication with Amazon Cognito without spilling too much blood 😜.

You can find the project here https://github.com/Depaa/amplify-sveltekit 😉

Follow this journey to production, you will see a lot of blog posts, here is a list I’ll try to keep updated:

• ✅ Serverless infrastructure on AWS for blog website;
• ✅ Backend Api on AWS for blog website;
• ✅ Building a high performing static backoffice on AWS with SvelteKit;
• ✅ Frontend users website for reading blog posts;
• SEO tweaks for blog website;
• Analytics and tracking views on our blog website;
• Infrastructure monitoring and alerting to the blog;
• Going live with the blog;
• CICD pipelines for the blog;
• Disaster recovery, RTO and RPO. Going multiregion with serverless;
• … you see, there are a lot planned, and if you want to add more points just DM me or comment right below.

Thank you so much for reading! 🙏 I will keep posting different AWS architecture from time to time so follow me on Medium ✨ or on LinkedIn 👉 https://www.linkedin.com/in/matteo-depascale/.