> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useparagon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Displaying the Connect Portal

> Connect to your users' app accounts with the Connect Portal

Once an integration has been added to the Paragon dashboard, you can now display the Connect Portal for that integration in your application. The **Connect Portal** is a component that your users interact with to connect their third-party app accounts to your application. The Connect Portal provides a **fully managed authentication** so you don't need to worry about managing, storing, or refreshing your customers' credentials.

## Activating the Integration

You'll need to mark your integration as **Active** for it to display to your end users.

To do this, click the "Inactive" button in the top-right corner and press "Activate".

<Frame>
  <img src="https://mintcdn.com/paragon/LX9pU-rN1rqQwuP1/assets/%5BParagon%5D%202025-02-18%20at%2008.00.45%20AM.gif?s=b91c0740b69e33a7397801b8aa5edb48" alt="" width="800" height="516" data-path="assets/[Paragon] 2025-02-18 at 08.00.45 AM.gif" />
</Frame>

## Displaying the Connect Portal in your app

[`.authenticate`](/apis/api-reference#authenticate-projectid-string-usertoken-string) should be called at the beginning of your application's lifecycle in all cases. This is to make sure that the `userToken` is always as fresh as possible, with respect to your user's existing session on your own site. You may reference [Installing the Connect SDK](/getting-started/installing-the-connect-sdk#setup) for a detailed explanation on how to use [`.authenticate`](/apis/api-reference#authenticate-projectid-string-usertoken-string).

**Example:**

```js theme={null}
await paragon.authenticate(
	// Your Paragon Project ID
	"38b1f170-0c43-4eae-9a04-ab85325d99f7",

	// See Setup for how to encode your user token
	"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.ey..."
);
```

<Accordion title="How do I find my Project ID?">
  You can copy your Project ID by clicking Copy Project ID under the Environment switcher:

  <Frame>
    <img src="https://mintcdn.com/paragon/LX9pU-rN1rqQwuP1/assets/%5BParagon%5D%202025-02-17%20at%2010.49.44%20PM.gif?s=62b88aae0fa3ed918a01ec15f0c1be63" alt="" width="800" height="411" data-path="assets/[Paragon] 2025-02-17 at 10.49.44 PM.gif" />
  </Frame>
</Accordion>

Once [`.authenticate`](/apis/api-reference#authenticate-projectid-string-usertoken-string) has been called and the Promise it returns has resolved, you can call [`.connect`](/apis/api-reference#connect-integrationtype-string) to launch your Connect Portal for a specific integration provider. You can find the `integrationType` identifier you need in the Overview page for the integration.

**Example:**

```js theme={null}
paragon.connect("salesforce");
```

You *must* have an integration configured of this `integrationType` for the Portal to appear. Otherwise, this function does nothing.

<Frame>
  <img src="https://mintcdn.com/paragon/HSp5hB8tE4Z6e44m/assets/The%20Connect%20Portal%20in%20Paragon%20Connect.png?fit=max&auto=format&n=HSp5hB8tE4Z6e44m&q=85&s=d84e1383472ea270403038608168be61" alt="" width="1836" height="1224" data-path="assets/The Connect Portal in Paragon Connect.png" />
</Frame>

## Authenticating an Account

Your users can connect their third-party app account in the Connect Portal by clicking **"Connect"**. Paragon natively supports all sorts of authentication types, like OAuth 2.0 and API Keys.

<Frame caption="An OAuth 2.0 Integration">
  <img src="https://mintcdn.com/paragon/7RZyQGncIlY8Xl4A/assets/Handling%20OAuth%202.0%20in%20the%20Connect%20Portal%20in%20Paragon%20Connect.png?fit=max&auto=format&n=7RZyQGncIlY8Xl4A&q=85&s=13cf7acc568fc9d065c729d0f3be3c8d" alt="" width="2128" height="1426" data-path="assets/Handling OAuth 2.0 in the Connect Portal in Paragon Connect.png" />
</Frame>

<Frame caption="An API Key Integration">
  <img src="https://mintcdn.com/paragon/7RZyQGncIlY8Xl4A/assets/Handling%20API%20Keys%20in%20the%20Connect%20Portal%20in%20Paragon%20Connect.png?fit=max&auto=format&n=7RZyQGncIlY8Xl4A&q=85&s=bb6419a202b25537c3f712d2363b3bc6" alt="" width="1814" height="1180" data-path="assets/Handling API Keys in the Connect Portal in Paragon Connect.png" />
</Frame>

Once your user connects their third-party app account in the Connect Portal, you can access their app account by creating [Workflows](/workflows/building-workflows) or via the [Proxy API](/apis/proxy). You can always call [`.getUser`](/apis/api-reference#getuser-paragonuser) to retrieve the currently authenticated user and their connected integration state.