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 Tailwick 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);
};

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

Judia 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