Auth Utils for React/Next.js Projects

This custom npx command adds a set of utilities for authentication (login/signup) to your React or Next.js project. It provides hooks for common authentication functionalities and integrates a default interceptor for Axios.

Related resources

• REPO

Features

• Hooks for Authentication:
  • useLoginForm: Handle login logic.
  • useRegisterForm: Handle signup logic.
  • useSetNewPassword: Handle password reset logic.
  • useUpdateProfile: Handle user profile updates.
  • withUserProfile: Fetch and manage user profile data.
• Axios Interceptor:
  • Default interceptor for handling authentication-related API requests. Also includes a refresh token logic.

Installation

Add the authentication utilities to your project by running the following command:

npx coax-auth-fe

Usage

After running the command, the following hooks and Axios interceptor will be added to your project:

Hooks

1. useLoginForm

   import { useLoginForm } from 'path-to-auth-utils';
   
   const Login = () => {
     const { handleSubmit, setValue, watch, formState } = useLoginForm();
   
     const { errors } = formState;
     const values = watch();
   
     return (
       <form onSubmit={handleSubmit}>
         <label>
          <input type="email" name="email" onChange={e => setValue("email", e.target.value)} value={values.email} />
          { errors.email ? <span>{errors.email.message}</span> : null }
         </label>
          <label>
            <input type="password" name="password" onChange={e => setValue("password", e.target.value)} value={values.password} />
            { errors.password ? <span>{errors.password.message}</span> : null }
          </label>
         <button type="submit">Login</button>
       </form>
     );
   };

2. useRegisterForm

   import { useRegisterForm } from 'path-to-auth-utils';
   
   const Register = () => {
      const { handleSubmit, setValue, watch, formState } = useRegisterForm();
   
     return (
        <form onSubmit={handleSubmit}>
          <input type="email" name="email" onChange={e => setValue("email", e.target.value)} value={watch("email")} />
          <input type="password" name="password" onChange={e => setValue("password", e.target.value)} value={watch("password")} />
          <input type="password" name="confirmPassword" onChange={e => setValue("confirmPassword", e.target.value)} value={watch("confirmPassword")} />
          <button type="submit">Register</button>
        </form>
     );
   };

3. useSetNewPassword

   import { useSetNewPassword } from 'path-to-auth-utils';
   
   const SetNewPassword = () => {
     const { handleSubmit, setValue, watch, formState } = useSetNewPassword({ token: "PASS_SECRET_TOKEN_HERE" });
   
     return (
        <form onSubmit={handleSubmit}>
          <input type="password" name="password" onChange={e => setValue("password", e.target.value)} value={watch("password")} />
          <input type="password" name="confirmPassword" onChange={e => setValue("confirmPassword", e.target.value)} value={watch("confirmPassword")} />
          <button type="submit">Set New Password</button>
        </form>
     );
   };

4. useUpdateProfile

   import { useUpdateProfile } from 'path-to-auth-utils';
   
   const UpdateProfile = () => {
      const { handleSubmit, setValue, watch, formState } = useUpdateProfile();
   
     return (
        <form onSubmit={handleSubmit}>
          <input type="text" name="username" onChange={e => setValue("username", e.target.value)} value={watch("username")} />
          <input type="email" name="email" onChange={e => setValue("email", e.target.value)} value={watch("email")} />
          <button type="submit">Update Profile</button>
        </form>
     );
   };

5. withUserProfile

   import { withUserProfile, useProfile } from 'path-to-auth-utils';
   
   const UserProfile = () => {
    const { isAuthenticated, profile, logout } = useProfile();
   
     if (!isAuthenticated) return null;
   
     return (
       <div>
         <h1>{profile.username}</h1>
         <p>{profile.email}</p>
       </div>
     );
   };
   
   export withUserProfile(UserProfile);

Configuration

Ensure you have the following environment variables set up in your project for the Axios interceptor to function correctly:

• REACT_APP_API_URL or NEXT_PUBLIC_API_URL: The base URL of your API.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes or improvements.

License

This project is licensed under the MIT License.

Feel free to customize the file paths and other details as needed for your specific setup.