> ## 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.

# Quickstart

> Integrate AuthPortal in your app.

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

## 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:

<CodeGroup>
  ```bash yarn theme={null}
  yarn add @authportal/firebase
  ```

  ```bash npm theme={null}
  npm install @authportal/firebase
  ```
</CodeGroup>

## Step 3. Initialize the library

Create a new AuthPortal instance and export the result so you can use it in your app.

```js authPortal.js theme={null}
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:

```jsx LoginButton.js theme={null}
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`:

```jsx pages/signin-authportal.js theme={null}
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;
  });
```