{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/working-with-react-and-aws-amplify/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"604753d1-361a-56bf-972f-213f8f70175a","excerpt":"In this article i will explain you step by step how you can work with react and aws amplify, cognito authentication , adding graphql api etc Step 1 Create IAM…","html":"<p>In this article i will explain you step by step how you can work with react and aws amplify, cognito authentication , adding graphql api etc</p>\n<h4>Step 1 Create IAM User and get access key and secret key for that IAM User</h4>\n<p>In order to work with AWS Amplify you need to create access credentials for the AWS user</p>\n<ul>\n<li>\n<p>Create IAM User with the root account of AWS</p>\n</li>\n<li>\n<p>Login with the credentials of IAM User</p>\n</li>\n<li>\n<p>Once Logged in Go to Security Credentials you will find this option on clicking top right corner dropdown icon</p>\n</li>\n<li>\n<p>Under AWS IAM Credentials tab create new Access key and save the credentials somewhere safe</p>\n</li>\n</ul>\n<h4>Step 2 Download AWS CLI and configure AWS</h4>\n<ul>\n<li>\n<p>Download aws cli and configure aws</p>\n</li>\n<li>\n<p>For Installing AWS CLI follow this link <a href=\"https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html\">https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html</a></p>\n</li>\n<li>\n<p>Once downloaded open your terminal and type command aws --version this will give you version of aws cli installed</p>\n</li>\n<li>\n<p>Run command aws configure in your terminal</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">(base) ankusingh@192 ~ % aws configure\nAWS Access Key ID [****************]:\n</code></pre>\n<p>It will ask for your AWS Access key and AWS Secret key just enter the key which you got in previous step</p>\n<h4>Step 3 Initializing AWS Amplify</h4>\n<ul>\n<li>Go to your project folder and then initialize aws amplify by running command below</li>\n</ul>\n<pre><code class=\"language-js\">amplify init\n</code></pre>\n<ul>\n<li>It will ask you certain option to configure under select authentication method select AWS access keys</li>\n</ul>\n<pre><code class=\"language-js\">Enter a name for the project (amplified)\nThe following configuration will be applied:\n\nProject information\n| Name: amplified\n| Environment: dev\n| Default editor: Visual Studio Code\n| App type: javascript\n| Javascript framework: react\n| Source Directory Path: src\n| Distribution Directory Path: build\n| Build Command: npm run-script build\n| Start Command: npm run-script start\n\n? Initialize the project with the above configuration? No\nEnter a name for the environment (dev)\n\n# Sometimes the CLI will prompt you to edit a file, it will use this editor to open those files.\nChoose your default editor\n\n# Amplify supports JavaScript (Web &#x26; React Native), iOS, and Android apps\nChoose the type of app that you're building (javascript)\n\nWhat JavaScript framework are you using (react)\n\nSource directory path (src)\n\nDistribution directory path (build)\n\nBuild command (npm run-script build)\n\nStart command (npm run-script start)\n\nSelect the authentication method you want to use: (Use arrow keys)\n❯ AWS profile\n  AWS access keys\n\n# This is the profile you created with the `amplify configure` command in the introduction step.\nPlease choose the profile you want to use (Use arrow keys)\n</code></pre>\n<ul>\n<li>Once you have successfully configured aws amplify in your project then run below command to push the configuration</li>\n</ul>\n<pre><code class=\"language-js\">amplify push\n</code></pre>\n<ul>\n<li>\n<p>Once you have pushed the configuration then it will generate <strong><em>aws-exports.js</em></strong> file in your <strong><em>src</em></strong> folder</p>\n</li>\n<li>\n<p>In your react project install aws amplify by running below command</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">npm install aws-amplify --save\n</code></pre>\n<ul>\n<li>Open <strong><em>src/index.js</em></strong> and copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import { Amplify } from \"aws-amplify\";\nimport awsExports from \"./aws-exports\";\nAmplify.configure(awsExports);\n</code></pre>\n<h4>Step 4 ADD AWS Cognito user pool for authentication using AWS amplify</h4>\n<ul>\n<li>Run below command to add authentication</li>\n</ul>\n<pre><code class=\"language-js\">(base) ankusingh@192 ~ % amplify add auth\n\n? Do you want to use the default authentication and security configuration? Default configuration\n? How do you want users to be able to sign in? Username\n? Do you want to configure advanced settings?  No, I am done.\n</code></pre>\n<ul>\n<li>Push the configuration</li>\n</ul>\n<pre><code class=\"language-js\">amplify push\n</code></pre>\n<ul>\n<li>Follow this link for all the authentication API so that you can add to your project</li>\n</ul>\n<p><a href=\"https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/#sign-out\">https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/#sign-out</a></p>\n<h4>Step 5 ADD GraphQl api to interact with dynamodb and perform any type of crud operation</h4>\n<ul>\n<li>Follow this link to add graphql API to your project</li>\n</ul>\n<p><a href=\"https://docs.amplify.aws/start/getting-started/data-model/q/integration/react/\">https://docs.amplify.aws/start/getting-started/data-model/q/integration/react/</a></p>","fields":{"slug":"/working-with-react-and-aws-amplify/"},"frontmatter":{"title":"Working with react and Aws amplify","date":"July 01, 2023","description":"In this article i will explain you how you can add aws amplify in your react project authentication with cognito user pool and garphql api","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/react-amplify.jpeg"}},"previous":{"fields":{"slug":"/working-with-api-in-nextjs/"},"frontmatter":{"title":"Working on API using MongoDB with NextJS","date":"June 25, 2023","bannerimage":"https://metacognitive.me/wp-content/uploads/2024/06/1_7IFWIqKtcdK7KOoMAopLqQ.png"}},"next":null},"pageContext":{"id":"604753d1-361a-56bf-972f-213f8f70175a","previousPostId":"90623196-5c56-5c0d-893a-95ae900c3e8c","nextPostId":null}},
    "staticQueryHashes": ["3860684146"]}