Next.js Show Loading Indicator Until Page Is Ready

How to show a loading indicator in Next.js page until the page is ready? Here is the Next.js page code: import { useEffect, useState } from 'react'; export default function Home() { // ##. variable to control display // ##. after data is fetched and ready const [dataReady, setDataReady] = useState(false); useEffect(()=>{ // ##. This is to simulate an API data fetch call setTimeout(()=>{ setDataReady(true) },3000); },[]); return ( <> <h2> Page ready ! [Read More]

AWS Invoke One Lambda Function From Another

In AWS Lambda, how to invoke one Lambda function from another ? Here is a sample JavaScript lambda function invoking another Lambda function (setMFA), const aws = require('aws-sdk') exports.handler = async function(event, context) { const lambda = new aws.Lambda({ region: 'us-west-2' }); let mfaResponse = await lambda.invoke({ FunctionName: 'setMFA', Payload: JSON.stringify( userPoolId : "userPoolId", username : "Username", mfa : true ) } } For this to work the invoking lambda function will require permissions to lambda:InvokeFunction. [Read More]

AWS Cognito adminSetUserMFAPreference not setting MFA

adminSetUserMFAPreference not working as expected while trying to set/unset MFA for user in AWS Cognito I had a use case in AWS Cognito where I had to set the MFA from the lambda functions using the adminSetUserMFAPreference in AWS JavaScript SDK. It wasn’t working and there is an open issue on GitHub related to the same at the time of writing this post. Interestingly, the same issue doesn’t exist in Python SDK. [Read More]

Unable to import module "lambda_function" no module named "lambda_function" | AWS Cognito | Lambda Function

Unable to import module ’lambda_function’ no module named ’lambda_function’ while testing AWS Lambda function from Docker image locally. I had the following folder structure for Lambda functions, nodepreAuthenticationTriggerindex.jsDockerfilepythongenerateFunclambda_function.pyDockerfile After building the docker image for Python lambda functions, I was trying to test the lambda functions locally using the following command: curl -XPOST "http://localhost:9000/2015-03-31/functions/function/invocations" -d {} But it was throwing the unable to import lambda module error. [Read More]

How to Check For Object Properties in JavaScript

How to Check If Object Property is Null or Undefined in JavaScript ? let obj = {name : 'Hari',info : {country : 'India'}} In the above code, obj.name returns Hari since the key name exists. If you try to access a non existent key from obj, like, obj.info.gender it will throw undefined. Now let’s say if the value of gender is undefined since it doesn’t exists we need to show some default value, like Not specified. [Read More]

How GitOps Can Help You Build Better and More Secure Web Applications

What Is GitOps? GitOps is an operational framework that takes DevOps principles used for application development, such as version control, iterative development, and automation, and applies them to infrastructure automation. In the traditional continuous integration / continuous delivery (CI/CD) work process, the software development lifecycle is automated, but infrastructure management is still a manual process that requires a dedicated team. Implementing infrastructure automation is becoming increasingly important in modern cloud environments and is a prerequisite for continuous deployment. [Read More]

Error "Token is not from a supported provider of this identity pool" | AWS | Cognito

Token is not from a supported provider of this identity pool If you are getting the following error, probably you have the wrong User Pool ID or App Client Id in your identity pool. To check go to Federated Identities dashboard. Click on Edit Identity Pool. Go to Authentication providers and check Cognito tab for the User Pool ID and App Client id. If one of your social sign in failing with the above error then check the corresponding tab such as Apple or Facebook and check if Apple Services ID or Facebook App ID is correct. [Read More]

Building Angular Apps with AWS Amplify

What Is AWS Amplify? AWS Amplify is a cloud service that lets you build full-stack mobile and web applications on Amazon infrastructure. AWS Amplify provides two main services: Amplify Hosting—provides a git-based workflow you can use to host full-stack serverless web apps with continuous deployment. Amplify Studio—provides a visual development environment for creating scalable, full-stack web and mobile applications. You can use the AWS Amplify Console (part of the AWS Management Console) to access Amplify Studio. [Read More]

Create a Simple Counter in React | Timer

How to create a Timer in React Let’s see how you can create a simple timer in React. You’ll be needing useEffect hook, setTimeout and some HTML. Let’s try create a Timer React component. Creating React Project You can create a React project using create-react-app npx create-react-app my-app cd my-app npm start You will be able see the app running on http://localhost:3000/. React Timer Component Create a file called timer.js inside the src folder. [Read More]