DEV Community: Kamruzzaman

An authentication process with AWS Cognito and node, express Graphql

Kamruzzaman — Sun, 25 Aug 2024 11:28:00 +0000

To create an authentication process using AWS Cognito with a Node.js, Express, and GraphQL setup, you can follow these steps:

1. Set Up AWS Cognito User Pool
Create a User Pool:

1. Go to the AWS Cognito dashboard and create a new User Pool.
2. Configure sign-up and sign-in options (email, phone number, etc.).
3. Set up security policies (password strength, MFA, etc.).
4. Add app clients (for example, web or mobile applications).
5. Save the pool ID and app client ID.

2. Install Necessary Packages
npm install express express-graphql graphql aws-sdk amazon-cognito-identity-js jsonwebtoken

3. Set Up Express Server
Create a basic Express server with GraphQL integration.

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

const app = express();

// GraphQL schema
const schema = buildSchema(`
  type Query {
    hello: String
  }

  type Mutation {
    signUp(email: String!, password: String!): String
    signIn(email: String!, password: String!): String
  }
`);

// Root resolver
const root = {
  hello: () => 'Hello world!',
  signUp: async ({ email, password }) => {
    // Sign up logic here
  },
  signIn: async ({ email, password }) => {
    // Sign in logic here
  },
};

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(4000, () => console.log('Server running on http://localhost:4000/graphql'));

4. Integrate AWS Cognito for Authentication
Set up the AWS Cognito logic for sign-up and sign-in.

const AWS = require('aws-sdk');
const AmazonCognitoIdentity = require('amazon-cognito-identity-js');
const jwt = require('jsonwebtoken');

const poolData = {
  UserPoolId: 'your-user-pool-id', // e.g., us-east-1_ExaMPle
  ClientId: 'your-client-id', // e.g., 1h57kf5cpq17m0emlq5hd17dil
};
const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

const signUp = async ({ email, password }) => {
  return new Promise((resolve, reject) => {
    const attributeList = [
      new AmazonCognitoIdentity.CognitoUserAttribute({
        Name: 'email',
        Value: email,
      }),
    ];

    userPool.signUp(email, password, attributeList, null, (err, result) => {
      if (err) {
        reject(err);
        return;
      }
      resolve(`User ${result.user.getUsername()} signed up successfully`);
    });
  });
};

const signIn = async ({ email, password }) => {
  return new Promise((resolve, reject) => {
    const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails({
      Username: email,
      Password: password,
    });

    const userData = {
      Username: email,
      Pool: userPool,
    };

    const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (result) => {
        const accessToken = result.getAccessToken().getJwtToken();
        resolve(accessToken);
      },
      onFailure: (err) => {
        reject(err);
      },
    });
  });
};

// Modify root resolver to use the signUp and signIn functions
const root = {
  hello: () => 'Hello world!',
  signUp: async ({ email, password }) => {
    try {
      return await signUp({ email, password });
    } catch (error) {
      throw new Error(error.message);
    }
  },
  signIn: async ({ email, password }) => {
    try {
      return await signIn({ email, password });
    } catch (error) {
      throw new Error(error.message);
    }
  },
};

5. Testing the Authentication Process

6. Secure GraphQL Endpoints
Use JWT tokens obtained from Cognito to secure your GraphQL endpoints.

const authenticate = (req, res, next) => {
  const token = req.headers.authorization;
  if (!token) {
    return res.status(401).send('Unauthorized');
  }

  jwt.verify(token, 'your-aws-cognito-jwt-verification-key', (err, decoded) => {
    if (err) {
      return res.status(401).send('Unauthorized');
    }
    req.user = decoded;
    next();
  });
};

app.use('/graphql', authenticate, graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

7. Handling Token Expiry and Refresh
Implement token refresh logic to handle token expiry using Cognito's refresh token.

This setup provides a basic framework for handling authentication using AWS Cognito in a Node.js, Express, and GraphQL environment. You can expand on this by adding more complex features such as MFA, user attributes, and more.

Open AI, Chat with files like(pdf, excel, CSV, doc, etc) With Node and React js.

Kamruzzaman — Wed, 22 Nov 2023 18:18:01 +0000

If you want to use Openai in your existing project it helps you to respond according to the files that you share. The below steps will help you.

First, you need to set up your express server.
Then do with this code,

Packages Needed - express, dot env, cors, fs, openai, multer.

const express = require("express");
const cors = require("cors");
const fs = require('fs')
const PORT = process.env.PORT || 5000;
const app = express();
const OpenAI = require('openai');
const multer = require('multer');


// User Middlewares
app.use(cors());
app.use(express.json());

app.get("/", (req, res) => {
  res.send(
    "<h2 style='color:green;box-sizing:border-box; margin:0; background: #f3f3f9; height: 95vh;'>Server is Running!<h2>"
  );
});

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY, // defaults to process.env["OPENAI_API_KEY"]
});

const upload = multer({ dest: 'uploads/' }); // Set the destination folder for uploads

app.post('/upload', upload.single('file'), async (req, res) => {
  const { file } = req;
  // Upload the file to OpenAI
  const { question } = req.body;
  try {
    const openaiFile = await openai.files.create({
      file: fs.createReadStream(file.path),
      purpose: 'assistants',
    });
    const assistant = await openai.beta.assistants.create({
      name: "you are a manual instructor",
      instructions: "based on file you will provide the relavant ans.",
      model: "gpt-3.5-turbo-1106",
      tools: [{ "type": "retrieval" }],
      file_ids: [openaiFile.id]
    });
    const thread = await openai.beta.threads.create();


    // Pass in the user question into the existing thread
    await openai.beta.threads.messages.create(thread.id, {
      role: "user",
      content: question,
    });

    // Use runs to wait for the assistant response and then retrieve it
    const run = await openai.beta.threads.runs.create(thread.id, {
      assistant_id: assistant.id,
    });

    let runStatus = await openai.beta.threads.runs.retrieve(
      thread.id,
      run.id
    );

    // Polling mechanism to see if runStatus is completed
    // This should be made more robust.
    while (runStatus.status !== "completed") {
      await new Promise((resolve) => setTimeout(resolve, 2000));
      runStatus = await openai.beta.threads.runs.retrieve(thread.id, run.id);
    }

    // Get the last assistant message from the messages array
    const messages = await openai.beta.threads.messages.list(thread.id);

    // Find the last message for the current run
    const lastMessageForRun = messages.data
      .filter(
        (message) => message.run_id === run.id && message.role === "assistant"
      )
      .pop();

    // If an assistant message is found, console.log() it
    if (lastMessageForRun) {
      res.status(200).json({ success: true, data: `${lastMessageForRun.content[0].text.value} \n` });
    }


  } catch (error) {
    console.error('Error uploading to OpenAI:', error);
    res.status(500).json({ success: false, error: 'Internal Server Error' });
  } finally {
    // Delete the uploaded file from the server
    fs.unlinkSync(file.path);
  }
});

After setting up and running the server, connect the existing API with React JS.

To design and run code successfully please set your environment with Tailwind css for design and Axios for API calls.

The React js code example is:

import axios from "axios";
import { useRef, useState } from "react";

function App() {
  const [usedFiles, setUsedFiles] = useState([]);
  const [chatHistory, setChatHistory] = useState([]);
  const [selectedChat, setSelectedChat] = useState(
    chatHistory?.length > 0 && chatHistory[0]
  );

  const fileInputRef = useRef(null);

  const handleButtonClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const handleCreateNewChat = () => {
    if (usedFiles?.length > 0) {
      setChatHistory([
        ...chatHistory,
        {
          id: chatHistory?.length + 1,
          messeges: [],
        },
      ]);
      setSelectedChat({
        id: chatHistory?.length + 1,
        messeges: [],
      });
    } else {
      alert("Please Select a file");
    }
  };

  // ..................................................................... Restricted ...........................................//

  const [file, setFile] = useState(null);
  const [question, setQuestion] = useState("");
  const [loading, setLoading] = useState(false);
  const handleFilesChange = async (event) => {
    setFile(event.target.files[0]);
    setUsedFiles([...usedFiles, event.target.files[0]]);
  };

  const handleQuestionChange = (event) => {
    setQuestion(event.target.value);
  };

  const handleChatSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file);
    formData.append("question", question);
    const updateSelectedChat = {
      ...selectedChat,
      messeges: [
        ...selectedChat.messeges,
        {
          user: question,
          chatbot: "",
          loading: true,
        },
      ],
    };
    setSelectedChat(updateSelectedChat);

    const updatedChatHistory = chatHistory.map((chat) => {
      if (chat.id === selectedChat.id) {
        return updateSelectedChat;
      } else {
        return chat;
      }
    });
    setChatHistory(updatedChatHistory);
    setQuestion("");
    try {
      const response = await axios.post(
        "http://localhost:5000/upload",
        formData
      );
      const data = response.data;
      if (data.success) {
        const updateSelectedChat = {
          ...selectedChat,
          messeges: [
            ...selectedChat.messeges,
            {
              user: question,
              chatbot: data.data,
              loading: false,
            },
          ],
        };
        setSelectedChat(updateSelectedChat);

        const updatedChatHistory = chatHistory.map((chat) => {
          if (chat.id === selectedChat.id) {
            return updateSelectedChat;
          } else {
            return chat;
          }
        });
        setChatHistory(updatedChatHistory);
        setQuestion("");
        // setResponse(data.data);
      } else {
        console.error("Error generating response:", data.error);
      }
    } catch (error) {
      console.error("Error generating response:", error);
    }
  };

  return (
    <>
      <div className="flex h-screen antialiased text-gray-800">
        <div className="flex flex-row h-full w-full overflow-x-hidden">
          <div className="flex flex-col py-8 pl-6 pr-2 w-64 bg-gray-100 flex-shrink-0">
            <div className="flex flex-row items-center justify-center h-12 w-full">
              <div className="flex items-center justify-center rounded-2xl text-indigo-700 bg-indigo-100 h-10 w-10">
                <svg
                  className="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
                  ></path>
                </svg>
              </div>
              <div className="ml-2 font-bold text-2xl">My Manuals</div>
            </div>
            <input
              type="file"
              style={{ display: "none" }}
              ref={fileInputRef}
              onChange={handleFilesChange}
            />
            <div
              onClick={handleButtonClick}
              className="flex border-b-2 border-black pb-3 mt-10 cursor-pointer"
            >
              <div>
                <svg
                  className="w-6 h-6 text-gray-800 "
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 16 16"
                >
                  <path
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M8 12V1m0 0L4 5m4-4 4 4m3 5v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3"
                  />
                </svg>
              </div>
              <div className="text-xl font-bold text-center ml-2">
                New Upload
              </div>
            </div>
            <div className="flex flex-col mt-8">
              <div className="flex flex-row items-center justify-between text-xs">
                <span className="font-bold">Files</span>
                <span className="flex items-center justify-center bg-gray-300 h-4 w-4 rounded-full">
                  {usedFiles?.length}
                </span>
              </div>
              <div className="mt-3 h-full overflow-y-auto over">
                {usedFiles?.map((res, i) => (
                  <div key={i} className="flex items-center mt-2">
                    {res?.type?.includes("pdf") ? (
                      <svg
                        className="w-6 h-6 text-gray-800 "
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 16 20"
                      >
                        <path
                          stroke="currentColor"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth="2"
                          d="M1 18a.969.969 0 0 0 .933 1h12.134A.97.97 0 0 0 15 18M1 7V5.828a2 2 0 0 1 .586-1.414l2.828-2.828A2 2 0 0 1 5.828 1h8.239A.97.97 0 0 1 15 2v5M6 1v4a1 1 0 0 1-1 1H1m0 9v-5h1.5a1.5 1.5 0 1 1 0 3H1m12 2v-5h2m-2 3h2m-8-3v5h1.375A1.626 1.626 0 0 0 10 13.375v-1.75A1.626 1.626 0 0 0 8.375 10H7Z"
                        />
                      </svg>
                    ) : (
                      <svg
                        className="w-6 h-6 text-gray-800 "
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 16 20"
                      >
                        <path
                          stroke="currentColor"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth="2"
                          d="M4.828 10h6.239m-6.239 4h6.239M6 1v4a1 1 0 0 1-1 1H1m14-4v16a.97.97 0 0 1-.933 1H1.933A.97.97 0 0 1 1 18V5.828a2 2 0 0 1 .586-1.414l2.828-2.828A2 2 0 0 1 5.828 1h8.239A.97.97 0 0 1 15 2Z"
                        />
                      </svg>
                    )}
                    <span className="ml-2">{res?.name}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="flex flex-col py-8 pl-6 pr-2 w-64 bg-white flex-shrink-0">
            <div className="flex flex-row items-center justify-center h-12 w-full">
              <div
                onClick={handleCreateNewChat}
                className="font-bold text-xl border-2 px-7 py-1 rounded cursor-pointer"
              >
                Start New Chat
              </div>
            </div>
            <div className="flex flex-col mt-8">
              <div className="flex flex-row items-center justify-between text-xs">
                <span className="font-bold">History</span>
                <span className="flex items-center justify-center bg-gray-300 h-4 w-4 rounded-full">
                  {chatHistory?.length}
                </span>
              </div>
              <div className="flex flex-col space-y-1 mt-4 -mx-2 h-full overflow-y-auto">
                {chatHistory?.map((res, i) => (
                  <>
                    {res?.messeges?.length > 0 ? (
                      <button
                        key={i}
                        className={`flex flex-row items-center ${
                          res?.id == selectedChat.id ? "bg-gray-50" : ""
                        } hover:bg-gray-100 rounded-xl p-2`}
                        onClick={() => setSelectedChat(res)}
                      >
                        <div className="text-sm font-semibold">
                          {res?.messeges[0]?.user == undefined
                            ? "New Messege"
                            : res?.messeges[0]?.user}
                        </div>
                      </button>
                    ) : (
                      <button
                        key={i}
                        className={`flex flex-row items-center ${
                          res?.id == selectedChat.id ? "bg-gray-50" : ""
                        } hover:bg-gray-100 rounded-xl p-2`}
                        onClick={() => setSelectedChat(res)}
                      >
                        <div className="text-sm font-semibold">New Messege</div>
                      </button>
                    )}
                  </>
                ))}
              </div>
            </div>
          </div>
          <div className="flex flex-col flex-auto h-full p-6">
            <div className="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-gray-100 h-full p-4">
              <div className="flex flex-col h-full overflow-x-auto mb-4">
                <div className="flex flex-col h-full">
                  <div className="grid grid-cols-12 gap-y-2">
                    {selectedChat?.messeges?.map((res, i) => (
                      <>
                        {res?.user !== undefined && (
                          <div
                            key={i}
                            className="col-start-6 col-end-13 p-3 rounded-lg"
                          >
                            <div className="flex items-center justify-start flex-row-reverse">
                              <div className="flex items-center text-white justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                Me
                              </div>
                              <div className="relative mr-3 text-sm bg-indigo-100 py-2 px-4 shadow rounded-xl">
                                <div>{res?.user}</div>
                              </div>
                            </div>
                          </div>
                        )}

                        {res?.chatbot !== undefined && (
                          <div className="col-start-1 col-end-8 p-3 rounded-lg">
                            <div className="flex flex-row items-center">
                              <div className="flex items-center text-white justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                Bot
                              </div>
                              <div className="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl">
                                <div>
                                  {res?.loading
                                    ? "..."
                                    : res?.chatbot.replace(
                                        /&#8203;``【oaicite:1】``&#8203;/g,
                                        ""
                                      )}
                                </div>
                              </div>
                            </div>
                          </div>
                        )}
                      </>
                    ))}
                  </div>
                </div>
              </div>
              {
                <form onSubmit={handleChatSubmit}>
                  <div className="flex flex-row items-center h-16 rounded-xl bg-white w-full px-4">
                    <div className="flex-grow">
                      <div className="relative w-full">
                        <input
                          type="text"
                          value={question}
                          disabled={chatHistory?.length === 0}
                          onChange={handleQuestionChange}
                          className="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10"
                        />
                      </div>
                    </div>
                    <div className="ml-4">
                      <button
                        type="submit"
                        className={`flex items-center justify-center  rounded-xl text-white px-4 py-1 flex-shrink-0 bg-indigo-500 hover:bg-indigo-600 ${
                          chatHistory?.length === 0
                            ? "opacity-50"
                            : "opacity-100"
                        }`}
                        disabled={chatHistory?.length === 0}
                      >
                        <span>Send</span>
                        <span className="ml-2">
                          <svg
                            className="w-4 h-4 transform rotate-45 -mt-px"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth="2"
                              d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                            ></path>
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </form>
              }
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

This is React full code you can use for your existing project.

Hope it will help you. Thanks.

React-pdf send pdf to server without download pdf.

Kamruzzaman — Tue, 17 Oct 2023 06:56:06 +0000

So we all are know that why we use react-pdf. If no im explaing basics.
Basically react-pdf is used for make pdf from front-end. Like you making a website that need to download the pdf. React-pdf is handling that so much easy way. They have Prefined component which we can use and design the pdf. If you need More details explanation please go here.

So how react-pdf package acctually work?
In React-PDF, when you generate a PDF document, it's typically stored as a Blob (Binary Large Object) in memory. You can then use this Blob to display the PDF in your application or save it to the user's device.

So now the question is why i can't send the file directly?
Beacause the file is not store anywhere in your device if you don't download. And the process is not good like first you need to download and then send it to the server.The invoice pdf that you designed if you need to send that one email. That means you need to connect the email server and need to send the file. So it's not easy to upload or post file directly.

So the solution is,

if you go through the react-pdf document you can see

they have a hook call usePDF()
and its by default receive the document that you have designed.
For example I designed the document:

const MyDoc = ( <Document> <Page> // My document data </Page> </Document> );
Now i can call that with usePDF like
const [instance, updateInstance] = usePDF({ document: MyDoc });
So here the instace give us an object. and there we have the blob url. Now we need to convert this blob url to bas64 data. For that we can easily send it to the server.

The Full Code example is:
import { usePDF, Document, Page } from '@react-pdf/renderer'; const MyDoc = ( <Document> <Page> // My document data </Page> </Document> );
const App = () => { const [pdfBase64, setPdfBase64] = useState() const [instance, updateInstance] = usePDF({ document: MyDoc });

// get pdf file invoice function blobToBase64(blobURL) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = () => {
const reader = new FileReader(); reader.onloadend = () => { if (reader.result) { resolve(reader.result.split(',')[1]); } else { reject("Error reading the blob."); } }; reader.readAsDataURL(xhr.response); };
xhr.onerror = reject; xhr.open('GET', blobURL); xhr.send(); }); }

// Usage const blobURL = instance?.url;

useEffect(() => { if (blobURL) { blobToBase64(blobURL) .then(base64String => { setPdfBase64(base64String); }) .catch(error => { console.error(error); }); } }, [blobURL])
function onSubmit(data) { axios.post(${server_url_here},pdfBase64) .then(res => { console.log(res); }) } return ( <button onClick={onSubmit}> Cancel </button> ); }

So if you open your network tab and see the result. You send the pdf data with base64.

Thanks for getting into touch.