npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

oneclickauth-backend

v1.0.1

Published

Secure and efficient backend for authentication in React apps.

Downloads

10

Readme

OneClickAuth-backend

OneClickAuth-backend is a plug-and-play backend solution for authentication and user management in your React applications. It integrates with MongoDB and provides seamless JWT-based authentication with minimal setup.

Features

  • Easy setup for authentication
  • JWT-based user management
  • MongoDB integration
  • Simple environment variable configuration

Installation

To install OneClickAuth into your React project, run the following command:

npm install oneclickauth-backend

Basic Setup

1. Create index.js:

In your project’s root directory, create a file named index.js and paste the code below:

import { createServer } from "oneclickauth-backend";
import dotenv from "dotenv";

dotenv.config();

// MongoDB connection URI from environment variables
const mongoUri = process.env.MONGODB_URI;

// Port for the backend server (default: 3000)
const port = 3000; // Customize the port if needed

// Start the server
createServer(mongoUri, port);

2. Environment Variables:

Create a .env file in the root directory of your project and add the following variables:

MONGODB_URI = Your_MongoDB_Connection_URI
JWT_SECRET = Your_Random_Secret_String
  • MONGODB_URI: Your MongoDB connection string.
  • JWT_SECRET: A random string used to sign and verify JWT tokens. Make sure to use a strong, unpredictable secret.

3. Run the Backend:

Once you've set up the index.js file and the .env configuration, start the backend by running the following command in the terminal:

node index.js

The server will start on the specified port (default: 3000) and connect to MongoDB using the provided URI.

API Routes

  • POST /backend/auth/signup: Register a new user.
  • POST /backend/auth/signin: Log in with email and password.
  • GET /backend/auth/signout: Log out the user.
  • POST /backend/user/update/${currentUser._id}: Update the User.
  • DELETE /backend/user/delete/${currentUser._id}: Delete the User.

Handling CORS or Proxy Issues

If you encounter CORS or proxy-reated issues while accessing the backend from the frontend, follow the steps below:

For React Apps

Add the following proxy configuration in your package.json:

"proxy": "http://localhost:3000" // Customize the port if needed

For Vite Apps

Add the following configuration to your vite.config.js:

// vite.config.js
export default {
  server: {
    proxy: {
      // Proxy API requests starting with /backend to the Express server
      '/backend': {
        target: 'http://localhost:3000', // Customize the port if needed
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/backend/, '/backend'),
      },
    },
  },
};

License

MIT License