Amplify Gen 2 with existing REST api and cognito

0

I have an existing server-less backend build using SAM that uses cogntio, API Gateway lambdas and dynamo DB. I need a front end that consumes this REST api. I am considering Amplify Gen 2 to do this with a react app. Amplify is capable of generating resources on the AWS side and directly mapping models to dynamo DB etc. However, I am trying to see if I can use Amplify to simply create a client that only consumes REST API endpoints after authenticating using cognito. I was looking at this tutorial below https://docs.amplify.aws/javascript/start/quickstart/ But the instructions tell you how to create the whole scaffold For example when we say "npm create amplify@latest" it is going to create resource files etc. to create backend resources.

Could someone please give me step by step instructions on how to start an amplify project that only consumes existing resources without creating any new ones. I only need to point it to an existing cognito user pool and an api gatway. How do you do this?

I did find this link https://docs.amplify.aws/react/build-a-backend/add-aws-services/rest-api/existing-resources/ But this one just gives a sample file. I don't know what steps I need to do to create a project before adding this sample file and where this sample file goes in the project or event the name and location of the file where this sample code should go. Please can you give step by step instructions on starting a project from scratch with a purpose of connecting to an existing API Gatway behind a cogito user pool? Please assume the user pool and the API Gateway are already available and only provide details on how to build the react client using amplify to take advantage of the authentication UI etc.?

asked 4 months ago432 views
1 Answer
0
Accepted Answer

In case it helps anyone else here is how I ended up solving this

I just created a plain old react project with vite and then added these to the App.tsx (or App.jsx if you are using Javascript, I am using typescript) The trick is to just use the amplify libraries as you would use any other library - without using amplify cli etc.

import "./App.css";
import { Authenticator } from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolClientId: "<my client id>",
      userPoolId: "<my pool id>",
    },
  },
});

function App() {
  const [count, setCount] = useState(0);

  return (
    <Authenticator socialProviders={["google"]}>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;
answered 4 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions