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.

In Skote Google and Facebook authentication is implemented in the project without relying on third-party plugins, but by leveraging Firebase, and the authentication functionality is located in the src/pages/auth-pages/login.tsx file.

import React from "react";
import PropTypes from "prop-types";
import nonauthLayout from '@layout/NonAuthLayout'
import { Button } from 'react-bootstrap'

//redux
import { useSelector, useDispatch } from "react-redux";
import { createSelector } from "reselect";

// Formik validation
import * as Yup from "yup";
import { useFormik } from "formik";

// actions
import { loginUser, resetLoginFlag, socialLogin } from '@slices/thunk'
    
const Login = () => {

    const validation: any = 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, router));
        }
    });

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

    const socialResponse = type => {
        signIn(type);
    };

    return(
        <Button
            className="btn btn-subtle-primary btn-icon"
            onClick={e => {
              e.preventDefault();
              socialResponse("facebook");
            }}
        >
            <i className="ri-facebook-fill fs-lg" />
        </Button>
        <Button
            className="btn btn-subtle-danger btn-icon"
            onClick={e => {
              e.preventDefault();
              socialResponse("google");
            }}
        >
            <i className="ri-google-fill fs-lg" />
        </Button>
    )
}
export default nonauthLayout(Login);

Skote is retrieving the SocialLogin response through a saga, capitalizing on the integration with Firebase. This procedure necessitates the inclusion of the Firebase Configuration file. The provided code snippet is located in _app.js 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 "src/helpers/firebase_helper";
                                    
const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_APIKEY,
    authDomain: process.env.NEXT_PUBLIC_AUTHDOMAIN,
    databaseURL: process.env.NEXT_PUBLIC_DATABASEURL,
    projectId: process.env.NEXT_PUBLIC_PROJECTID,
    storageBucket: process.env.NEXT_PUBLIC_STORAGEBUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_MESSAGINGSENDERID,
    appId: process.env.NEXT_PUBLIC_APPID,
    measurementId: process.env.NEXT_PUBLIC_MEASUREMENTID,
};
                                        
//init firebase backend
initFirebaseBackend(firebaseConfig);