Social Authentication

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/Authentication/Login.jsx file. 

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import withRouter from "../../components/Common/withRouter";

//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, socialLogin } from "../../store/actions";
    
const Login = (props) => {
    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, props.router.navigate));
        }
    });

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

     //for facebook and google authentication
    const socialResponse = type => {
        signIn(type);
    };

    return(
        <Link
            to="#"
            className="social-list-item bg-primary text-white border-primary"
            onClick={e => {
              e.preventDefault();
              socialResponse("facebook");
            }}
        >
            <i className="mdi mdi-facebook" />
        </Link>
        <Link
            to="#"
            className="social-list-item bg-danger text-white border-danger"
            onClick={e => {
              e.preventDefault();
              socialResponse("google");
            }}
        >
            <i className="mdi mdi-google" />
        </Link>
    )
}
export default withRouter(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.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);

After that you need to replace the "fake" and add "firebase" in .env file to access the firebase credentials, From REACT_APP_DEFAULTAUTH with adding firebase credentials. 

REACT_APP_DEFAULTAUTH = firebase

After that you need to replace the "fake" and add "firebase" in .env file to access the firebase credentials, From VITE_APP_DEFAULTAUTH with adding firebase credentials. 

VITE_APP_DEFAULTAUTH = firebase

© Skote.