oneclickauth

OneClickAuth - React Authentication Component

OneClickAuth is a customizable and easy-to-integrate Sign In and Sign Up React component package for seamless user authentication. This package allows you to easily implement authentication flows into your React app, with OAuth support for third-party providers.

Features

• Customizable Sign In and Sign Up components
• OAuth integration support for third-party logins
• Highly customizable styles for inputs, buttons, and other UI elements
• Built with responsive design principles
• Error handling and success messages for authentication actions

Installation

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

npm install oneclickauth

Basic Setup

• To get started, import the SignUp and SignIn components from OneClickAuth into your React project:

import { SignUp, SignIn } from 'oneclickauth';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/sign-up" element={<SignUp />} />
        <Route path="/sign-in" element={<SignIn/>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Handling Form Data Submission

Add a onSubmit functiomn

// Simple onSubmit function
const handleFormSubmit = (formData) => {
  console.log("Form submitted:", formData);
  return { success: true, message: "Form submitted successfully!" };
};

// Usage in SignUp component
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/sign-up" element={
        <SignUp 
          onSubmit={handleFormSubmit}
        />} />
        <Route path="/sign-in" element={<SignIn/>} />
      </Routes>
    </BrowserRouter>
  );
}

Add an onSubmit Function to Access Backend and Redirect After Successful SignUp/SignIn.

import { useNavigate } from "react-router-dom";

// create a function named SignInWrapper
const SignInWrapper = () => {
  const navigate = useNavigate();

  // Handles form submision data
  const handleSignIn = async (formData) => {
    try {
      // add your backend endpoints
      const response = await fetch("Your_Endpoints", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();
      if (!response.ok || data.success === false) {
        return { success: false, message: data.message || "An error occurred" };
      }
      // after successful signin redirect to '/' you can add your desired path
      navigate('/');
      return { success: true };
    } catch (error) {
      return { success: false, message: "Network error" };
    }
  };

  return (
    <SignIn
      onSubmit={handleSignIn}
      placeholders={{
        email: "Enter your email",
        password: "Enter your password",
      }}
      buttonText="Sign In"
      className="custom-signin"
      OAuthComponent={OAuth}
    />
  );
};

// pass SignInWrapper as prop
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/sign-in" element={ <SignInWrapper/> } />
      </Routes>
    </BrowserRouter>
  );
}

• You can also create a wrapper for SignUp in a similar way.

Backend Integration

This package is for the frontend only. If you need backend support for authentication, you can use the backend package by following this link: https://www.npmjs.com/package/oneclickauth-backend

SignUp Component Props

Prop Name	Type	Description	Default
onSubmit	function	Function to handle form submission.	undefined
buttonText	string	Text to display on the submit button.	"Sign Up"
OAuthComponent	Component	Custom OAuth component for third-party login support.	undefined
placeholders	Object	Placeholder text for username, email, password inputs.	{ username: "Your username", email: "Your email", password: "Your password" }
theme	string	Theme of the component, either "light" or "dark".	"light"
containerStyle	Object	Custom style object for the container.	{}
headerStyle	Object	Custom style object for the header.	{}
inputStyle	Object	Custom style object for input fields.	{}
buttonStyle	Object	Custom style object for the submit button.	{}
footerStyle	Object	Custom style object for the footer.	{}
errorStyle	Object	Custom style object for error messages.	{}

SignIn Component Props

Prop Name	Type	Description	Default
onSubmit	function	Function to handle form submission.	undefined
buttonText	string	Text to display on the submit button.	"Sign In"
OAuthComponent	Component	Custom OAuth component for third-party login support.	undefined
placeholders	Object	Placeholder text for email, password inputs.	{ email: "Enter your email", password: "Enter your password" }
theme	string	Theme of the component, either "light" or "dark".	"light"
containerStyle	Object	Custom style object for the container.	{}
headerStyle	Object	Custom style object for the header.	{}
inputStyle	Object	Custom style object for input fields.	{}
buttonStyle	Object	Custom style object for the submit button.	{}
footerStyle	Object	Custom style object for the footer.	{}
errorStyle	Object	Custom style object for error messages.	{}

Customizing Styles

• You can customize styles for various elements in the components. Here’s how you can pass custom styles for the SignUp and SignIn components:

<SignUp
  containerStyle={{ backgroundColor: '#f0f0f0' }}
  headerStyle={{ color: '#333' }}
  inputStyle={{ color: '#000' }}
  buttonStyle={{ background: 'linear-gradient(to right, #ff7e5f, #feb47b)' }}
  footerStyle={{ color: '#000' }}
  errorStyle={{ color: 'red' }}
/>

CSS Class Names

• You can also create a CSS file and use these class names to add custom styles.

• The SignIn component uses the following CSS class names:

Class Name	Description
signin-container	The container for the entire sign-in component.
signin-header	The header element within the sign-in form.
signin-form	The form element for sign-in inputs and button.
signin-input	The input fields for email and password.
signin-button	The button used to submit the form.
signin-footer	The footer section of the sign-in component.
signin-footer-text	The text within the footer.
signup-signin-link	The link to navigate to the sign-up page.
signin-error	The error message display area.
signin-success	The success message display area.

Make sure to define these classes in your CSS file (Custom.css) to style the SignIn component appropriately.

<SignIn
  onSubmit={handleSignIn}
  classname="SignIn"
/>

How to add CSS?

.SignIn(Classname you provide as a prop) .signin-container(choose component you want){
  //add CSS here
}

• To use SignUp, change signin-container to signup-container and adjust other class names accordingly.

OAuth Component Integration

• To integrate OAuth (e.g., Google, Facebook logins), pass your custom OAuth component like this:

<SignIn
  onSubmit={handleSignIn}
  OAuthComponent={OAuth}
  placeholders={{
    email: "Enter your email",
    password: "Enter your password",
  }}
  buttonText="Sign In"
/>

• The OAuth component should return a button element for initiating third-party authentication.

License

MIT License