Social authentication in React typically involves allowing users to log in to your application using their social media accounts, such as Google and Facebook. This approach offers a convenient way for users to access your application without the need to create a separate account.

Velzon has Google and Facebook Authentication and the the functionality in src/pages/Authentication/Login.js file in Js and src/pages/Authentication/Login.ts file in Ts.

import { socialLogin } from "../../slices/thunks";

const validation = useFormik({
    // enableReinitialize : use this flag when initial values needs to be changed
    enableReinitialize: true,

    initialValues: {
        email: userLogin.email || "admin@themesbrand.com" || '',
        password: userLogin.password || "123456" || '',
    },
    validationSchema: Yup.object({
        email: Yup.string().required("Please Enter Your Email"),
        password: Yup.string().required("Please Enter Your Password"),
    }),
    onSubmit: (values) => {
        dispatch(loginUser(values, props.router.navigate));
    }
});

const signIn = type => {
    dispatch(socialLogin(type, props.router.navigate));
};

//for facebook and google authentication
const socialResponse = type => {
    signIn(type);
};
     
<Link
    to="#"
    className="btn btn-primary btn-icon me-1"
    onClick={e => {
        e.preventDefault();
        socialResponse("facebook");
}}
>
    <i className="ri-facebook-fill fs-16" />
</Link>

Velzon is retrieving the SocialLogin response through a thunk, capitalizing on the integration with Firebase. This procedure necessitates the inclusion of the Firebase Configuration file. The provided code snippet is located in both App.js for JavaScript and App.tsx for TypeScript files.

By removing the comments from the provided code and appending the necessary credentials in the .env file, the authentication for Google and Facebook will be activated. After following the steps descripbed in Firebase Setup given in the previous page.

import { initFirebaseBackend } from "./helpers/firebase_helper";
                                                        
const firebaseConfig = {
    apiKey: process.env.REACT_APP_APIKEY,
    authDomain: process.env.REACT_APP_AUTHDOMAIN,
    databaseURL: process.env.REACT_APP_DATABASEURL,
    projectId: process.env.REACT_APP_PROJECTID,
    storageBucket: process.env.REACT_APP_STORAGEBUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
    appId: process.env.REACT_APP_APPID,
    measurementId: process.env.REACT_APP_MEASUREMENTID,
};
                                                            
//init firebase backend
initFirebaseBackend(firebaseConfig);