Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.authportal.dev/llms.txt

Use this file to discover all available pages before exploring further.

Work in progress! AuthPortal is not ready for production use yet. Join our Discord to receive support setting up AuthPortal, you will need it!

​
Step 1. Sign up for a account

Visit the Dashboard to create an account and obtain your client ID and domain.

​
Step 2. Install the client SDK

Install the AuthPortal for Firebase SDK via your package manager: 
yarn add @authportal/firebase

​
Step 3. Initialize the library

Create a new AuthPortal instance and export the result so you can use it in your app.
authPortal.js
import { AuthPortal } from "@authportal/firebase";

export const authPortal = new AuthPortal({
  client_id: "<your client id>",
  domain: "<your authportal domain>",
  redirect_path: "/signin-authportal",
});

​
Step 4: Add a sign-in button

Create a button somewhere on your site to call authPortalsignInWithRedirect: The implementation depends on your UI library, here’s an example for React:
LoginButton.js
import { authPortal } from "./authPortal";

const LogInButton = () => {
  return <button onClick={authPortal.signInWithRedirect}>Log In</button>;
};

​
Step 4: Handle Redirects

Create a page under /signin-authportal (you can change the redirect_path to your liking). On this page, call authPortal.getRedirectResult:
pages/signin-authportal.js
import { authPortal } from "./authPortal";

// on page load:
authPortal
  .getRedirectResult({ firebase_auth: getAuth(app) }) // pass the firebase auth app
  .then(({ user, return_to }) => {
    // return_to is the URL where the button was clicked, return the user back there
    // the method you use for the redirect depends on your web framework

    // simple example
    window.location.replace(return_to);
  })
  .catch((e) => {
    // something unexpected happened, display an error
    window.body.innerText = "An unexpected error occured: " + e.message;
  });