Skip to main content

​
Overview

useOAuthSignIn handles the full redirect-based OAuth flow for web apps. It provides three functions:
  • initiateOAuth — redirect an unauthenticated user to the provider’s authorization page to sign in or sign up.
  • linkOAuthProvider — redirect an already-authenticated user to link an additional OAuth provider to their account.
  • handleOAuthCallback — call this on the OAuth callback page to extract tokens from the URL fragment and set the authenticated session.
This hook is available in @replyke/react-js only. It uses window.location and is not compatible with React Native.

​
Usage Example

Initiating sign-in: 
import { useOAuthSignIn } from "@replyke/react-js";

function SignInPage() {
  const { initiateOAuth, isLoading, error } = useOAuthSignIn();

  return (
    <>
      <button
        onClick={() =>
          initiateOAuth({
            provider: "google",
            redirectAfterAuth: "https://myapp.com/auth/callback",
          })
        }
        disabled={isLoading}
      >
        Sign in with Google
      </button>
      {error && <p>{error}</p>}
    </>
  );
}
Handling the callback: 
import { useEffect } from "react";
import { useOAuthSignIn } from "@replyke/react-js";

function OAuthCallbackPage() {
  const { handleOAuthCallback } = useOAuthSignIn();

  useEffect(() => {
    handleOAuthCallback();
  }, []);

  return <p>Signing you in...</p>;
}
Linking an additional provider: 
import { useOAuthSignIn } from "@replyke/react-js";

function LinkGitHub() {
  const { linkOAuthProvider } = useOAuthSignIn();

  return (
    <button
      onClick={() =>
        linkOAuthProvider({
          provider: "github",
          redirectAfterAuth: "https://myapp.com/settings",
        })
      }
    >
      Connect GitHub
    </button>
  );
}

​
Returns

​
initiateOAuth
function
Starts the OAuth sign-in / sign-up flow for unauthenticated users. Redirects the browser to the provider’s authorization page.Parameters:
  • provider (required) — OAuth provider identifier (e.g. "google", "github").
  • redirectAfterAuth (optional) — URL to redirect to after authentication. Defaults to the current page URL.
​
linkOAuthProvider
function
Links an additional OAuth provider to the currently authenticated user. The user must already be signed in. Redirects the browser to the provider’s authorization page.Parameters:
  • provider (required) — OAuth provider identifier (e.g. "google", "github").
  • redirectAfterAuth (optional) — URL to redirect to after linking. Defaults to the current page URL.
​
handleOAuthCallback
() => boolean
Reads tokens from the URL fragment (#accessToken=...&refreshToken=...) after the provider redirects back to your app. On success, stores the tokens and initializes the session. Returns true if tokens were found and set, false otherwise.Call this inside a useEffect on your callback page.
​
isLoading
boolean
true while the authorization request is in progress. Stays true after the redirect is triggered (since the page navigates away).
​
error
string | null
Error message if the OAuth flow fails, or null when there is no error.

​
Integration Guide

For full OAuth setup instructions, see OAuth Authentication.