Skip to main content

SignIn.SocialLogins

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

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 no additional external setup beyond the basic SDK configuration. Ensure you have added the Apple authentication plugin to your app.config.js as shown in 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​