CODEWITHSUNDEEP
reactjsamazon-web-servicesauthentication
Krisna
Krisna

Reputation: 3423

AWS-React: The specified key does not exist

I made one react app. My app works as expected. This app's target is practice AWS-COGNITO. For Cognito validation I am using amazon-cognito-identity-js package. I made one helper function where I validate the Congnito. and reuse it in different component. I split my Nav bar into two components. From Congnito current user I made one callback function and use it in useEffect, and dependencies put the callback function, by default getAuthenticatedUser is null. I add condition where it fetch the data, if getAuthenticatedUser then redirect to signin and signup page. I deployed my app to s3 bucket and this the link. This app runs first time, When I refresh it then got error: 404 Not Found. I really don't know what is the issue and somehow the path react path get disappear. I share my code in code-sandbox.

This is my conditional path

import React from "react";
import SigninLinks from './SigninLinks';
import SignoutLinks from './SignoutLinks';
import useHandlder from '../configHandler/useHandler';

const Nav = () => {
  const { getAuthenticatedUser } = useHandlder();
  const Links = getAuthenticatedUser() === null ? <SignoutLinks /> : <SigninLinks />
  return (
    <nav className="nav-wrapper grey darken-3">
      <div className="container">
        <h2 className="brand-logo">Logo</h2>
        {
          Links
        }

      </div>
    </nav>
  );
};

export default Nav;

This is my handler functions

import React, { useCallback, useEffect } from 'react';
import { CognitoUserPool } from 'amazon-cognito-identity-js';

const Pool_Data = {
  UserPoolId: "us-east-1_9gLKIVCjP",
  ClientId: "629n5o7ahjrpv6oau9reo669gv"
};

export default function useHandler() {

  const userPool = new CognitoUserPool(Pool_Data)

  const getAuthenticatedUser = useCallback(() => {
    return userPool.getCurrentUser();
  },
    [],
  );

  useEffect(() => {
    getAuthenticatedUser()
  }, [getAuthenticatedUser])

  const signOut = () => {
    return userPool.getCurrentUser()?.signOut()
  }
  return {
    userPool,
    getAuthenticatedUser,
    signOut
  }
};

Upvotes: 0

Views: 859

Answers (1)

Lukas Liesis
Lukas Liesis

Reputation: 26413

It's paths issue. You get 404 on /path not in root /. Check S3 settings for hosting static sites. On S3 make sure static website hosting is enabled:

enter image description here

You react app loads on /index.html JavaScript then redirects and takes over the path. You need S3 to resolve path to index.html, then it will work.

Upvotes: 2

Related Questions