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 auth provider 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.auth.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 from your dashboard. Follow the guide on how to configure social login to learn more. The supported loginMethods are GOOGLE, APPLE, TWITTER, DISCORD, FACEBOOK, LINE or EPIC_GAMES.

Implicit flow

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

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.auth.storeCredentials({
    player: player_id,
    accessToken: access_token,
    refreshToken: refresh_token,
  });

Pooling flow

You can pool the auth with the key returned from the initOAuth, this will check if the auth is ready every 0.5 seconds for 5 minutes sessions live for 1 hour, so you can pool the auth again if you need to.

import { OAuthProvider } from '@openfort/openfort-js';
import openfort from "./openfortConfig"
 
function AuthButton() {
  return (
    <button onClick={async () => {
      const {key} = await openfort.auth.initOAuth({
        provider: OAuthProvider.FACEBOOK,
        options: {
          usePooling: true,
        },
      });
      await openfort.auth.poolOAuth(key);
    }}
    >
      Continue with Facebook
    </button>
  );
}

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