What is @genezio/auth

@genezio/auth is a package that provided by genezio to ensure comprehensive solutions for integrating various authentication providers into a genezio application.

Table of Contents

• Features
• Getting Started
• Documentation
• Examples
• Getting Support
• System Requirements
• Troubleshooting
• Contributions
• Ecosystem
• Badge
• License

Features

• 📦  Provides comprehensive solutions for integrating various authentication providers into a genezio application.
• 📱  Google, Email & Password login.
• 🧰  Session management.
• 📝  Token storage customization.
• 📬  Email verification.
• 📧  Password reset.
• 📡  Detailed error codes.

Getting Started

Install @genezio/auth

To install the @genezio/auth package, you can use npm or yarn:

npm install @genezio/auth

yarn add @genezio/auth

Examples

Configuration

At the beginning you need to configure the authentication token and region of your genezio application. These can be found Authentication Configuration screen on the genezio Dashboard.

import { AuthService } from "@genezio/auth";

AuthService.getInstance().setTokenAndRegion("<token>", "<region>");

Register with Email & Password

This will trigger the AuthService's register method whenever someone clicks the "Sign Up" button:

const handleSubmit = async (event: React.FormEvent) => {
  event.preventDefault();
  setLoading(true);
  try {
      const response = await AuthService.getInstance().register(email, password, name);
      console.log('Register Success', response);

      navigate('/login');
  } catch (error: any) {
      console.log(error);
      alert("An error has occured")
  }
  setLoading(false);
};

Login with Email & Password

This will trigger the AuthService's login method whenever someone clicks the "Login" button:

const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setLoginLoading(true);

    try {
        await AuthService.getInstance().login(email, password)
        navigate("/");
    } catch (error: any) {
        console.log('Login Failed', error);
        alert('Login Failed');
    }
    setLoginLoading(false);
}

Google Login

This will trigger the AuthService's googleRegistration method whenever someone clicks the Google login button:

const handleGoogleLogin = async (credentialResponse: CredentialResponse) => {
    console.log(credentialResponse);
    setGoogleLoginLoading(true);

    try {
        await AuthService.getInstance().googleRegistration(credentialResponse.credential!)

        console.log('Login Success');
        navigate('/');
    } catch(error: any) {
        console.log('Login Failed', error);
        alert('Login Failed');
    }
    setGoogleLoginLoading(false);
};

Verify if user is logged in

The userInfo method on the AuthService is for getting the user's information. You can use this method to check if the user is logged in or not.

useEffect(() => {
    if (name && email) {
        return;
    }

    AuthService.getInstance().userInfo().then((user) => {
        setName(user.name!);
        setEmail(user.email);
    }).catch((error) => {
        console.error(error);
    })
}, []);

Logout

The logout method on the AuthService is for logging the user out.

const logout = async () => {
  try {
      await AuthService.getInstance().logout();
      navigate('/login');
  } catch (error) {
      console.error(error);
  }
}

Handling Errors

The ErrorCode enum contains all the error codes that can be thrown by the @genezio/auth package.

import { AuthService, ErrorCode } from '@genezio/auth';

const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setLoading(true);
    try {
        const response = await AuthService.getInstance().register(email, password, name);
        console.log('Register Success', response);

        navigate('/login');
    } catch (error: any) {
        console.log(error);
        if (error.code === ErrorCode.EMAIL_ALREADY_EXISTS) {
            alert("Email already exists")
        } else { 
            alert("An error has occured")
        }
    }
    setLoading(false);
};

Backend Integration

Here getSecret method is protected by @GnzAuth decorator. This will ensure that only authenticated users can access this method.

import { GenezioDeploy, GenezioMethod, GnzAuth, GnzContext } from "@genezio/types";

@GenezioDeploy()
export class BackendClass {
  secret: string = "Hello World!";

  @GenezioMethod()
  @GnzAuth()
  async getSecret(context: GnzContext) {
    console.log(context.user);
    return this.secret;
  }
}

Documentation

To find more details on how to use @genezio/auth, check out the official documentation

Here you can find some examples:

• Auth example

To find more details on how to use genezio, check out the official documentation:

• Getting started
• Project Structure
• CLI commands
• Test Interface
• Integrations

If you cannot find what you are looking for in the docs, don't hesitate to drop us a GitHub issue or start a discussion on Discord.

Getting support

We are here to assist you with any problems or questions you may have while using @genezio/auth. Don't hesitate to reach out to us on GitHub or join our Discord community for real-time assistance.

System requirements

@genezio/auth can be used in Genezio projects developed on macOS, Linux-based distributions, and Windows.

It is designed to work with Node.js versions >= 16.0.0.

Troubleshooting

For the most common issues that our users have dealt with, we created a Troubleshooting section in the documentation.

If you don't find the guidance there, drop us a GitHub issue. We are more than happy to help you!

Contributing

Contributions are welcome! Please see our Contributing Guide for more details.

Show your support by giving us a star :star:, to help others discover genezio and become part of our community!

Ecosystem

There are a growing number of awesome projects deployed with genezio and we want to shout out about them.

If you deployed a project using genezio let us know on Discord and we will add it to our Hall Of Fame.

Badge

Brag to your friends that you are using genezio with this awesome badge ->

[![deployed with: genezio](https://img.shields.io/badge/deployed_with-genezio-6742c1.svg?labelColor=62C353&style=flat)](https://github.com/genez-io/genezio)

License

@genezio/auth is licensed under GNU General Public License v3.0. For more information, please refer to LICENSE