Social authentication in Next.js allows users to log in using their social media accounts, such as Google and Facebook. This provides a convenient way for users to access your application without creating a separate account.

Velzon supports Google and Facebook Authentication. The main logic is in src/app/(auth)/login/page.tsx and related files.

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

const validation = useFormik({
    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 retrieves the SocialLogin response through a thunk, using Firebase integration. This requires a Firebase configuration file.

Add your credentials to .env.local using the NEXT_PUBLIC_ prefix for Next.js:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_DATABASE_URL=your_database_url
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

Initialize Firebase in src/utils/fakeBackendInit.ts:

import { initFirebaseBackend } from "@/helpers/firebase_helper";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase backend
initFirebaseBackend(firebaseConfig);