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.tsx file. 

import { socialLogin } from "slices/thunks";

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:any) => {
    dispatch(socialLogin(type, props.router.navigate));
};

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

<Link
    to="#"
    className="social-list-item bg-primary text-white border-primary"
    onClick={(e: any) => {
    e.preventDefault();
    socialResponse("facebook")
    }}
>
    <i className="mdi mdi-facebook" />
</Link>
<Link
    to="#"
    className="social-list-item bg-danger text-white border-danger"
    onClick={(e: any) => {
    e.preventDefault();
    socialResponse("google")
    }}
>
    <i className="mdi mdi-google" />
</Link>

Skote 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 App.tsx 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);

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

© Skote.