Posts

Showing posts from May, 2023

How to integrate Amazon Cognito with SvelteKit Auth

Image
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 th...

A Guide to Amplify CLI - Part 3 - Authentication

Image
In this post, I will show you how to integrate Authentication for your users to register and login on your application with an username and password. I assume you have npm installed and have little knowledge about different services in AWS. In this tutorial, we will be using Amazon Cognito as it is Amplify's main authetication provider. Cognito handles user registration, authentication, and different account operations. Steps : 1. Install aws-amplify by typing in CMD: npm install aws-amplify 2. The easiest way to use Authentication with Amplify is by using Amplify CLI. Type into your CMD: amplify add auth 3. Under "..the default authentication and security..", select ` Default configuration `. 4. For "..users to be able to sign in", select ` Username `. 5. For "..configure advanced settings", select ` No, I am done` . 6. Run ` amplify push ` to build all your local backend resources and provision it in cloud. Now, we have to create sign up and sign in...

A Guide to Amplify CLI - Part 2 - REST API

Image
Introduction In post, I'll walk you through the process of adding an API to your Amplify project. If you haven't initialized any Amplify project yet, head on to  A Guide to Amplify CLI - Part 1 Before we start I assume you have already initialized an Amplify project on your system and have NPM installed. In this post, I'll cover: - amplify <category> add - amplify <category> update - amplify <category> remove - amplify <category> push Steps: 1. After your Amplify project has been initialized with ` amplify init `, next type ` amplify add api ` on CMD. 2. Under mentioned services, select ` REST `. 3. Next, type any name for your resource to be used as label. I am going with ` products ` 4. Next, give a path for your REST endpoint. For keeping it simple, let's go with ` /product-items ` 5. For `Lambda source`, it chooses `Create a new Lambda function` by itself. Next. type an AWS Lambda name for this. Example: ProductsLambda . 6. Choose ` N...

A Guide to Amplify CLI - Part 1

Image
In this post, I'll walk you through the process of installing and configuring Amplify CLI. I assume you already have an AWS account and npm installed on your system. Topics covered in this post: 1. Installation of Amplify CLI 2. Configure the Amplify CLI 3. List of different Amplify CLI commands Steps: 1. The Amplify Command Line Interface is a unified toolchain to create AWS cloud services for an application. Now, install the Amplify CLI:  npm install -g @aws-amplify/cli 2. Let's configure the Amplify CLI: - To set up Amplify CLI, we have to configure it in order to connect it to our AWS account. - On CMD, type ` amplify configure ` - You will be prompted to sign in to your AWS administrator account and then get redirected to your default web browser. There login with your credentials. After the login is successful, come back to your CMD console. - Here, specify the AWS region you want to work on. Hit Enter and then you will be asked to complete the user creation process. If y...

How To Set Up a GraphQL server with Apollo Server on Localhost

Image
In this post, I'll walk you through the process of setting up a GraphQL server with Apollo Server and also doing different operations of GraphQL on the mock data.  Steps: 1. Create a new folder. Open CMD, and type ` npm init -y ` to scaffold your package.json. We are using ` -y ` so to fast-track the process and keep the defaults. 2. We are going to need the following dependencies: graphql, apollo-server and nodemon. ` npm install graphql apollo-server nodemon ` 3. After the above packages have been added successfully, open your code in any editor or IDE. 4. Create a new file and name it ` index.js ` at the root of your project folder. Inside index.js type the following: 5. Open package.json , under scripts, define a new key as ` start `, and for its value, type ` nodemon index.js `. 6. Open CMD again, type ` npm run start ` and hit enter. On the console, you will the see the message as ` Server is running on http://localhost:4000/ `. 7. Open GraphQL Playground at  https://www...