Social Login (OAuth)

To initiate sign in, you can use the initOAuth() method from the Openfort JavaScript library and provide a redirectTo URL which points to a callback route.

Implicit flow: that's all you need to do. The user will be taken to Google's consent screen, and finally redirected to your app with an access and refresh token pair representing their session.
Pooling flow: for example in Server-Side Auth, you need to redirect the user back to your website.

You will need to call the initOAuth method:

import {OAuthProvider} from "@openfort/openfort-js";
await openfort.initOAuth({
    provider: OAuthProvider.GOOGLE, // or FACEBOOK, TWITTER, etc.
    options: {
      // Depdening on the flow
      // redirectTo: 'https://your-website.com/login',
      // usePooling: true,
    },
});

Configure your social login providers at your dashboard. Follow the guide on how to configure social login to learn more.

Configure your social login providers from your dashboard. Follow the guide on how to configure social login to learn more. The supported loginMethods are 'google', 'twitter', 'discord', 'facebook' or 'epic_games'.

auth.tsx

openfortConfig.ts

import { OAuthProvider } from '@openfort/openfort-js';
import openfort from "./openfortConfig"
function AuthButton() {
  return (
    <button onClick={async () => {
      const {url} = await openfort.initOAuth({
        provider: OAuthProvider.FACEBOOK,
        options: {
          redirectTo:'https://your-website.com/login',
        },
      });
      window.location.href = url;
    }}
    >
      Continue with Facebook
    </button>
  );
}

response.json

{
  "url": "redirect-url",
  "key": "key"
}

Now you can redirect the user to the initOAuth.url and when the process is done, you will be redirected to the redirectTo url with tokens https://your-website.com?access_token=...&refresh_token=...&player_id=... You can then use those parameters to authenticate the user:

openfort.storeCredentials({
    player: player_id,
    accessToken: access_token,
    refreshToken: refresh_token,
  });

Uppon successful authentication, the SDK will return a token that can be used to authenticate the user in your application.

response.json

{
  "player": {
      "id": "pla_cc9ed2b7-c5f5-4c43-8dca-c4b104ba1762",
      "object": "player",
      "createdAt": 1710976453,
      "linkedAccounts": [
          {
              "provider": "facebook",
              "disabled": false,
              "externalUserId": "2"
          }
      ]
  },
  "token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJhdWQiOiJwcm9fOGY3ZTM1NTktMjhkNy00MWE2LTgxNGMtMjU0OTkzZTdkNjFkLXRlc3QiLCJleHAiOjE3MTA5ODI2MDIsImlhdCI6MTcxMDk3OTAwMiwiaXNzIjoib3BlbmZvcnQueHl6Iiwic2lkIjoiMzhhMDdmMzktMTUxOS00MjE0LWJmNmMtNzI0Zjg0ZDBiZGQwIiwic3ViIjoicGxhX2NjOWVkMmI3LWM1ZjUtNGM0My04ZGNhLWM0YjEwNGJhMTc2MiJ9.EcFtS__GwyxJu1S3tO7jMBbTCIJCpqsoNxxJrqILrKjNl2N5-SIMG2z_s2Vs8ztG6KAVy6zIp6P9GzfD7s4JiA",
  "refreshToken": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJzaWQiOiIzOGEwN2YzOS0xNTE5LTQyMTQtYmY2Yy03MjRmODRkMGJkZDAiLCJpYXQiOjE3MTA5NzkwMDIsImV4cCI6MTcxMzU3MTAwMn0.koNd4eoevBQQR3-z0CMGL5qVzOURZEeAgjvrHMRloLgDbScS2Qbi4W-vf2fE0fYOWUIAHnAq7cDABNwSQrEvSQ"
}

Social Login (OAuth)

Resources#