Skip to main content

SignIn.SocialLogins

Container component that groups social login buttons with consistent horizontal layout and spacing.

Provider requirement​

The social-login buttons use the SDK theme for spacing, colors and typography. Render them inside the SDK ThemeProvider (usually imported as ThemeProvider as OvokThemeProvider) and the OvokProvider from @ovok/core, as shown in the installation guide. A cancelled Apple prompt is treated as a cancellation and does not call onError; successful login sessions retain both the FHIR reference and its display value.

Prerequisites​

Before using social login components, you need to complete the following setup steps:

Google Login Setup​

  1. Get Google Credentials: Obtain your Google client ID and iOS URL scheme from Google Cloud Console. For further information please follow this guide
  2. Configure App: Update your app.config.js or app.json with the Google Sign-In plugin:
// app.config.js
export default {
  expo: {
    plugins: [
      [
        "@react-native-google-signin/google-signin",
        {
          iosUrlScheme: "com.googleusercontent.apps.YOUR_CLIENT_ID",
        },
      ],
    ],
  },
};

For detailed Google Sign-In configuration, see the Installation Guide.

Apple Login Setup​

Apple authentication requires the Apple authentication plugin and a native rebuild. See the Installation Guide.

Ovok Dashboard Configuration​

Both Google and Apple login methods require configuration in the Ovok Dashboard:

  1. Navigate to the Ovok Dashboard
  2. Update or Create a ClientApplication with the following extension configuration:
{
  "extension": [
    {
      "url": "https://api.ovok.com/fhir/StructureDefinition/external-auth-internal-id",
      "valueString": "google-web-app-id",
      "extension": [
        {
          "url": "https://api.ovok.com/fhir/StructureDefinition/external-auth-client-id",
          "valueString": "605727522930-c06g9o9f4t906fqt9bkg6sncdn4lb504.apps.googleusercontent.com"
        },
        {
          "url": "https://api.ovok.com/fhir/StructureDefinition/external-auth-provider-type",
          "valueString": "google"
        }
      ]
    }
  ]
}

Configuration Values:

  • external-auth-internal-id: Custom identifier for matching (use this value in the internalId prop)
  • external-auth-client-id:
    • For Google: Your Google client ID from Google Cloud Console
    • For Apple: Your app's bundle identifier
  • external-auth-provider-type: Set to "google" or "apple"

OvokClient Configuration​

After configuring the ClientApplication in the Ovok Dashboard, update your OvokClient configuration to include the ClientApplication ID:

// app/_layout.tsx
import { OvokClient } from "@ovok/core";

const ovokClient = new OvokClient({
  ...
  socialLoginClientId: "YOUR_CLIENT_APPLICATION_ID", // ClientApplication ID from Ovok Dashboard
});

Important: Replace YOUR_CLIENT_APPLICATION_ID with the actual ClientApplication ID from your Ovok Dashboard configuration.

Quick Example​

import { AuthResponse } from "@ovok/core";
import { SignIn, useAppTheme } from "@ovok/native";
import React from "react";
import { StyleSheet } from "react-native";

// Static styles outside component
const styles = StyleSheet.create({
  socialContainer: {
    alignItems: "center",
  },
});

const SocialLoginSection = () => {
  const theme = useAppTheme();

  const handleSuccess = (response: AuthResponse) => {
    console.log("Social login successful:", response);
  };

  const handleError = (error: Error) => {
    console.error("Social login failed:", error);
  };

  return (
    <SignIn.SocialLogins
      style={[
        styles.socialContainer,
        {
          marginVertical: theme.spacing(3),
        },
      ]}
    >
      <SignIn.SocialLogins.GoogleLogin
        googleIosClientId="your-ios-client-id.googleusercontent.com" // This will be used for ios devices
        googleWebClientId="your-web-client-id.googleusercontent.com" // This will be used for android devices
        internalId="google-login" // This is the name that you add in extension of ClientApplication for google provider
        onSuccess={handleSuccess}
        onError={handleError}
      >
        <SignIn.SocialLogins.GoogleLogin.Icon />
        <SignIn.SocialLogins.GoogleLogin.Text>
          Continue with Google
        </SignIn.SocialLogins.GoogleLogin.Text>
      </SignIn.SocialLogins.GoogleLogin>

      <SignIn.SocialLogins.AppleLogin
        internalId="apple-login" // This is the name that you add in extension of ClientApplication for apple provider
        onSuccess={handleSuccess}
        onError={handleError}
      >
        <SignIn.SocialLogins.AppleLogin.Icon />
        <SignIn.SocialLogins.AppleLogin.Text>
          Continue with Apple
        </SignIn.SocialLogins.AppleLogin.Text>
      </SignIn.SocialLogins.AppleLogin>
    </SignIn.SocialLogins>
  );
};

export default SocialLoginSection;

Props​

PropTypeRequiredDefaultDescription
testIDstring--Test identifier
styleStyleProp<ViewStyle>--Custom styles

Inherits all props from React.PropsWithChildren for child components

Component Behavior​

The component uses horizontal layout with flexDirection: "row", justifyContent: "center", and flexWrap: "wrap" to center social login buttons and allow wrapping on smaller screens.

Styling​

Theme Variables Used​

  • theme.spacing(6) - Gap spacing between child components used by default

Child Components​