Social Provider Login & Signup Component

PropelAuth's Social Provider Login & Signup component allows you to customize your login and signup pages with social login / sso, such as logging in with Google, Microsoft, and more. It is designed to be used when your user has a Login State of LOGIN_REQUIRED.

We highly recommend reviewing the Login and Signup Guide if using any of our login or signup components.

Social Provider Login & Signup

Login With Google
Login With Microsoft

Shadcn Installation

Install this component from our shadcn registry.

    npx shadcn@latest add https://components.propelauth.com/r/social-provider-login.json
    ```

* * *

# Reference APIs

These are the APIs that are used by the above component. You can use these APIs directly in your own code.

## [loginWithSocialProvider](https://ui.propelauth.com/login-signup-apis/login-with-social-provider#login-with-social-provider)

Redirects the user to login with the specified [Social Login provider](https://docs.propelauth.com/sso/social-login). If signups are enabled, will create a new user if one does not already exist.

## Arguments

- Name `provider` 
  - Type: SocialLoginProvider  
  - Description: The provider to login with. Must be one of these options:
    - Google
    - Github
    - Microsoft
    - Slack
    - Salesforce
    - Linkedin
    - Outreach
    - Quickbooks
    - Xero
    - Salesloft
    - Atlassian
    - Apple

### Request

import { SocialLoginProvider } from '@propelauth/frontend-apis'
const { loginWithSocialProvider } = useAuthFrontendApis()

// Typescript version <button onClick={() => loginWithSocialProvider(SocialLoginProvider.GITHUB)}> Login with Github

// Javascript version <button onClick={() => loginWithSocialProvider("Google")}> Login with Google ```