How to integrate Amazon Cognito with SvelteKit Auth

Hi. In this post, I'll show how to create a SvelteKit project and integrate Amazon Cognito for Sign up, Sign in and logout functionalities. Before proceeding further, you will need to have npm and node installed on your system.

SvelteKit is a framework for developing robust, performant web application rapidly using Svelte. More about SvelteKit can be get here.

Steps
1. Initialize a SvelteKit project by typing in CMD: npm create svelte@latest <app_name>

2. Under "Which Svelte app template?", choose `Skeleton project`, This will generate barbones scaffolding structure for your new SvelteKit app.

3. Under "type checking with TypeScript", choose `No`.

4. Under "..additional option", you can choose to add ESLint, Prettier, Playwright or Vitest. If you want to keep the app simple for now, you can skip this step too.

5. Press Enter and the project is ready. Next step is to change directory to our app name. Here, it is `frontendshopkart`.  Install all the dependencies using `npm install`.

To run this application on live server or browser, run `npm run dev` or `npm run dev -- --open` to open the server in your browser directly.

6. This is how your project structure will look. The first page that loads on your browser when you run `npm run dev` resides at `src/routes/+page.svelte

7.  To quickly reach the Authentication part, let's create a simple header on the homepage. From here, we will define different routes for sign up, sign in and logout.

In same file. `src\routes\+page.svelte`, let's create a structure.


8. In the same file, let's define our styling.


9. This is how the homepage looks as of now.

10. Lets begin integrating SvelteKit Auth. SvelteKit Auth provides authentication for SvelteKit apps. It also allows us to add authentication providers and customize the authentication flow of the app.

In order to have SvelteKit Auth into our project, we need to have`@auth/sveltekit`. For this, go to your project root, and run `npm install @auth/core @auth/sveltekit`. 

11. As said earlier, we are going to use Amazon Cognito for authentication.

If you already have a Cognito user pool, its well and good, if not, follow my other post on How to create a Cognito user pool.

11.  Add Amazon Cognito SDK to this SvelteKit project. Run `npm i amazon-cognito-identity-js` in project root. The Amazon Cognito Identity SDK for JavaScript allows JavaScript enabled applications to sign-up and authenticate users, view, delete and update user attributes via the Amazon Cognito Identity service.

12. Next, create a .env file with following keys: COGNITO_USER_POOL_ID (IdentityPoolId) and COGNITO_CLIENT_ID. Head on to https://blog.sumitkp.in/2023/05/a-guide-to-amplify-cli-part-3-amplify.html#:~:text=configure()%60%20method.-,Steps,-%3A to know how to get these values.

Comments

Post a Comment

Popular

How To Create MySQL Table with SequelizeJS

Image
Hello, in this post I will be showing how you can create an SQL table using JavaScript without the knowledge of MySQL. Sequelize is a promise-based  Node.js   ORM tool  for  Postgres ,  MySQL ,  MariaDB ,  SQLite ,  Microsoft SQL Server ,  Amazon Redshift  and  Snowflake’s Data Cloud . It features solid transaction support, relations, eager and lazy loading, read replication and more.
OPEN

How To Read CSV Files in Java as Maven Project

Image
Many of us have problems reading CSV files in Java but not anymore!. In this guide, I will share how to read CSV files as Maven Project. For creating a Maven project: In your Eclipse IDE, click on File > New > Project... > Maven >Maven Project > Next > Check "Create a simple project" checkbox. Under Group Id: The name could be anything. It is same as any package name. E.g. in.sumitkp Under Artifact Id: Same as above It is same as any project name. E.g. maven-demo1 Let the Version be the default. Under Name: Give the name for your project Click Finish. In your Project Explorer, all the necessary files will be automatically generated. Inside the root folder, there will be an XML file auto-generated called  pom.xml . About pom.xml: POM stands for Project Object Model It is an XML file that contains information about the project and configuration details used by Maven to build the project. When running a task, Maven looks for the pom.xml file in the directory. I...
OPEN

How To Create A Hibernate Project in Maven

Image
In this post, I will be showing you how to create a Hibernate project using Maven and how we can add MySQL dependencies to it. Here, is a whole process picture which you can click and follow the steps. The direction of the process has been indicated by arrow icons. Now, configuring the Hibernate XML file: Inside your project folder, right-click on 'src/main/java' and select New > Other... > Type filter text: xml > Under XML folder, click on XML File > Click Next > Under File Name, type: hibernate.cfg.xml > Finish. Inside this hibernate.cfg.xml file, we would now need a dtd line. dtd stands for 'document type definition'. It defines the tagging structure of an XML document. For this, search on Google or any search engine: hibernate dtd. Find for the result that says "Index of /dtd - Hibernate". Click the link or go to  https://hibernate.org/dtd/  . On the next page, click on either of these three links. A dtd file will be downloaded. Open the ...
OPEN