# Social Login (OAuth)

Use `initOAuth()` to initiate OAuth sign-in. Provide a `redirectTo` URL that points to a callback route in your application.

The supported providers are `GOOGLE`, `APPLE`, `TWITTER`, `DISCORD`, `FACEBOOK`, `LINE`, and `EPIC_GAMES`.

:::note
Configure your social login providers at [your dashboard](https://dashboard.openfort.io/providers).
Follow the guide on how to [configure social login](/docs/configuration/social-login) to learn more.
:::

:::warning
If you receive an `Invalid CallbackURL` error, verify that:

* The OAuth provider has been configured in the [Openfort dashboard](https://dashboard.openfort.io/providers).
* The `redirectTo` URL is valid.
  :::

## Initiate OAuth

Call `initOAuth` with the provider and redirect URL. You can also pass an optional `options` parameter to customize the OAuth flow:

```typescript
initOAuth({
  provider: OAuthProvider,
  redirectTo: string,
  options?: {
    scopes?: string,              // Space-separated OAuth scopes (e.g., 'email profile')
    skipBrowserRedirect?: boolean, // Don't auto-redirect to OAuth page
  }
}): Promise<string>
```

The method returns the OAuth authorization URL as a string:

:::code-group

```tsx [auth.tsx]
import { OAuthProvider } from '@openfort/openfort-js';
import openfort from "./openfortConfig"

function AuthButton() {
  return (
    <button onClick={async () => {
      const url = await openfort.auth.initOAuth({
        provider: OAuthProvider.GOOGLE,
        redirectTo: 'https://your-website.com/auth/callback',
      });
      window.location.href = url;
    }}>
      Continue with Google
    </button>
  );
}
```

```ts [openfortConfig.ts]
import { Openfort } from '@openfort/openfort-js';

const openfort = new Openfort({
  baseConfiguration: {
    publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY",
  }
});

export default openfort;
```

:::

## Handle callback

After the user completes the OAuth flow, they're redirected to your `redirectTo` URL with query parameters containing the session token and user ID:

```text
https://your-website.com/auth/callback?token=...&user_id=...
```

Store the credentials to complete authentication:

```ts
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
const userId = urlParams.get('user_id');

openfort.auth.storeCredentials({
  token: token,
  userId: userId,
});
```

## Login with ID token

Use `logInWithIdToken` to authenticate users who already have an OAuth token from an external provider:

:::code-group

```tsx [auth.tsx]
import { OAuthProvider } from '@openfort/openfort-js';
import openfort from "./openfortConfig"

async function loginWithExternalToken(token: string) {
  const result = await openfort.auth.logInWithIdToken({
    provider: OAuthProvider.GOOGLE,
    token: token,
  });

  console.log('User logged in:', result.user.id);
}
```

```json [response.json]
{
  "token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": "usr_cc9ed2b7-c5f5-4c43-8dca-c4b104ba1762",
    "email": "user@example.com",
    "name": "John Doe",
    "image": "https://example.com/avatar.jpg",
    "emailVerified": true,
    "createdAt": "2024-03-20T12:00:00Z",
    "updatedAt": "2024-03-20T12:00:00Z"
  }
}
```

:::