Forem: Yusuf Ginanjar

Implementing Google Login with Redirect-Based Approach in ReactJS

Yusuf Ginanjar — Sun, 19 May 2024 16:46:42 +0000

Social logins, like login with Google, can significantly improve the user experience. By offering a simpler registration and login process, social logins reduce friction and make it easier for users to access your application. Many users, myself included, prefer social authorization over manual registration because it saves time and eliminates the need to remember yet another username and password.

OAuth 2.0 is a protocol that enables applications to securely access resources (like user information) on a user's behalf with their consent.

Here are the steps involved in developing login with Google using the redirect-based approach:

Implementation

If you want to see the full source code, you can visit this repository:
https://github.com/yusufginanjar/minimal-google-login

1. React Js Implementation

Create route /login to access Login.jsx and /auth/success to access LoginSuccess.jsx

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="login" element={<Login />} />
          <Route path="auth/success" element={<LoginSuccess />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Install Packages

npm install react-router-dom axios

Create a React component Login.jsx to handle the login functionality:

import React from 'react';
import { Link } from 'react-router-dom';

const clientId = 'YOUR_GOOGLE_CLIENT_ID'; // Replace with your actual client ID
const redirectUri = 'http://localhost:5000/callback'; // Replace with your redirect URI

const Login = () => {
  const handleLogin = () => {
    const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=<span class="math-inline">\{clientId\}&redirect\_uri\=</span>{redirectUri}&response_type=code&scope=openid%20profile%20email`;
    window.location.href = googleAuthUrl;
  };

  return (
    <div className="login-container">
      <h1>Login with Google</h1>
      <button onClick={handleLogin}>Sign in with Google</button>
      <p>
        By clicking "Sign in with Google," you agree to our terms of service and privacy policy.
      </p>
    </div>
  );
};

export default Login;

Create a React component LoginSuccess.jsx to handle the login success and catch the token:

import { useEffect } from "react";

const LoginSuccess = (props) => {
    useEffect(() => {
        const token = new URLSearchParams(window.location.search).get("token");
        if (!token) {
            window.location.href = "/login";
        }
        localStorage.setItem("TOKEN", token);
                console.log(token);
    }, []);

    return (
         <div>Login Successful</div>
    );
};

export default LoginSuccess;

2. Backend Server Setup (Node.js with Express):

const express = require('express');
const axios = require('axios');
const app = express();

const clientId = 'YOUR_GOOGLE_CLIENT_ID';
const clientSecret = 'YOUR_GOOGLE_CLIENT_SECRET'; // Replace with your actual client secret
const redirectUri = 'http://localhost:5000/callback';

app.get('/callback', async (req, res) => {
  const code = req.query.code;

  try {
    const response = await axios.post('https://oauth2.googleapis.com/token', {
      code,
      client_id: clientId,
      client_secret: clientSecret,
      redirect_uri: redirectUri,
      grant_type: 'authorization_code'
    });

    const tokens = response.data;
    res.redirect(`http://localhost:3000/auth/success?token=${tokens}`); // Replace with your success route if needed
  } catch (error) {
    console.error(error);
    res.status(500).send('Authentication failed');
  }
});


app.listen(5000, () => {
  console.log('Server running on http://localhost:5000');
});

Conclusion

This approach offers a smooth integration with Google's authentication services, making it valuable tool for enhancing user experience in your ReactJs applications. Feel free to explore additional features to further enrich your application's functionality.

This article was created by the assistance of Gemini and ChatGPT.

How to Create a Fancy Carousel in ReactJs

Yusuf Ginanjar — Sat, 18 May 2024 17:03:45 +0000

Finding a non-boring carousel can sometimes be a challenge. Here, we'll introduce you to a fancy carousel with swiper library that you can integrate into your ReactJs application.

Understanding the Code

We will break down the code step-by-step to guide you through the creation process.

1. Install Swiper

The first step involves installing the sweeper library using npm or yarn:

npm i swiper

2. Import component and styles

Here, we import necessary components and styles from the swiper/react library and its CSS modules:

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/autoplay";

3. Create Sweeper Component

This section defines SwiperComponent which holds the configuration and content for the carousel:

// SwiperComponent.jsx
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/autoplay";
import "./styles.css";
import {
    Autoplay,
    EffectCoverflow,
    Pagination,
    Navigation,
} from "swiper/modules";

const SwiperComponent = () => {
    return (
        <Swiper
            effect={"coverflow"}
            grabCursor={true}
            centeredSlides={true}
            slidesPerView={"auto"}
            loop={true}
            coverflowEffect={{
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            }}
            autoplay={{
                delay: 3000,
                disableOnInteraction: false,
            }}
            pagination={{
                clickable: true,
            }}
            navigation={true}
            modules={[Autoplay, EffectCoverflow, Pagination, Navigation]}
            className="mySwiper">
            <SwiperSlide>
                <img src="https://via.placeholder.com/300" alt="slide 1" />
            </SwiperSlide>
            <SwiperSlide>
                <img src="https://via.placeholder.com/300" alt="slide 2" />
            </SwiperSlide>
            <SwiperSlide>
                <img src="https://via.placeholder.com/300" alt="slide 3" />
            </SwiperSlide>
            <SwiperSlide>
                <img src="https://via.placeholder.com/300" alt="slide 4" />
            </SwiperSlide>
            <SwiperSlide>
                <img src="https://via.placeholder.com/300" alt="slide 5" />
            </SwiperSlide>
        </Swiper>
    );
};

export default SwiperComponent;

4. Add style.css

This section defines custom CSS styles for the carousel. You can customize the appearance to match your application's design:

#app {
    height: 100%
}

html,
body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
}

.swiper-slide img {
    display: block;
    width: 100%;
    border-radius: 13px;
}

.mySwiper .swiper-slide-active img {
    border: 10px solid #E4E4E4;
    position: relative;
    right: 10px;
}

.swiper-button-prev,
.swiper-button-next {
    color: #333;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 5px #c8c8c8;
}

.mySwiper .swiper-button-prev {
    left: 50%;
    transform: translate(-150px);
}

.mySwiper .swiper-button-next {
    right: 50%;
    transform: translate(150px);
}


.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 20px;
}

/* md screen */
@media (min-width: 768px) {
    .swiper-button-prev {
        transform: translate(-200px);
    }

    .swiper-button-next {
        transform: translate(200px);
    }
}

5. Use the Sweeper component in your App

Finally, we integrate the SwiperComponent into your main React application component (usually App.jsx):

// App.jsx
import React from 'react';
import SwiperComponent from './SwiperComponent';

const App = () => {
  return (
    <div className="App">
      <h1>React Swiper with Coverflow Effect</h1>
      <SwiperComponent />
    </div>
  );
};

export default App;

Conclusion

By following these steps, you'll be able to create a visually appealing and interactive carousel with a coverflow effect in your ReactJs application. Remember to replace the placeholder images with your desired content and customize style further to match your application's design.

This article was created with the assistance of Gemini and ChatGPT.

How to Implement QR Scanner in ReactJs

Yusuf Ginanjar — Fri, 17 May 2024 16:24:36 +0000

Imagine a QR code as a fancy barcode that holds information like website addresses or secret messages. When you scan a QR code with your phone or a scanner app, it's like using a special translator. The scanner app reads the squiggles and lines of the QR code and turns them back into regular words and numbers that your phone can understand.

Here's a step-by-step breakdown:

Secret message in a picture: Information gets squeezed into a special picture called a QR code.
Scanning with your camera: You point your phone's camera at the QR code, like taking a picture.
Translating the squiggles: A scanner app on your phone reads the lines and squares of the QR code.
Getting the message: The app figures out what information is hidden in the QR code.
Taking action: Your React app receives the information and does something cool with it, like showing a website or logging you into something.

In this tutorial, we'll walk you through building a QR code scanner using ReactJS.

1. Install qr-scanner

npm i qr-scanner

yarn i qr-scanner

2. Create Component QrReader and write code below

Header

import { useEffect, useRef, useState } from "react";
import "./QrStyles.css";
import QrScanner from "qr-scanner";

Component

const QrReader = () => {
    // QR States
    const scanner = useRef<QrScanner>();
    const videoEl = useRef<HTMLVideoElement>(null);
    const qrBoxEl = useRef<HTMLDivElement>(null);
    const [qrOn, setQrOn] = useState<boolean>(true);

    // Result
    const [scannedResult, setScannedResult] = useState<string | undefined>("");

    // Success
    const onScanSuccess = (result: QrScanner.ScanResult) => {
        // 🖨 Print the "result" to browser console.
        console.log(result);
        // ✅ Handle success.
        // 😎 You can do whatever you want with the scanned result.
        setScannedResult(result?.data);
    };

    // Fail
    const onScanFail = (err: string | Error) => {
        // 🖨 Print the "err" to browser console.
        console.log(err);
    };

    useEffect(() => {
        if (videoEl?.current && !scanner.current) {
            // 👉 Instantiate the QR Scanner
            scanner.current = new QrScanner(videoEl?.current, onScanSuccess, {
                onDecodeError: onScanFail,
                // 📷 This is the camera facing mode. In mobile devices, "environment" means back camera and "user" means front camera.
                preferredCamera: "environment",
                // 🖼 This will help us position our "QrFrame.svg" so that user can only scan when qr code is put in between our QrFrame.svg.
                highlightScanRegion: true,
                // 🔥 This will produce a yellow (default color) outline around the qr code that we scan, showing a proof that our qr-scanner is scanning that qr code.
                highlightCodeOutline: true,
                // 📦 A custom div which will pair with "highlightScanRegion" option above 👆. This gives us full control over our scan region.
                overlay: qrBoxEl?.current || undefined,
            });

            // 🚀 Start QR Scanner
            scanner?.current
                ?.start()
                .then(() => setQrOn(true))
                .catch((err) => {
                    if (err) setQrOn(false);
                });
        }

        // 🧹 Clean up on unmount.
        // 🚨 This removes the QR Scanner from rendering and using camera when it is closed or removed from the UI.
        return () => {
            if (!videoEl?.current) {
                scanner?.current?.stop();
            }
        };
    }, []);

    // ❌ If "camera" is not allowed in browser permissions, show an alert.
    useEffect(() => {
        if (!qrOn)
            alert(
                "Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
            );
    }, [qrOn]);

    return (
        <div className="qr-reader">
            {/* QR */}
            <video ref={videoEl}></video>
            <div ref={qrBoxEl} className="qr-box">
                {!videoEl?.current && (
                    <img
                        src="/static/images/icons/scan_qr1.svg"
                        alt="Qr Frame"
                        width={256}
                        height={256}
                        className="qr-frame"
                    />
                )}
            </div>

            {/* Show Data Result if scan is success */}
            {scannedResult && (
                <p
                    style={{
                        position: "absolute",
                        top: 0,
                        left: 0,
                        zIndex: 99999,
                        color: "white",
                    }}>
                    Scanned Result: {scannedResult}
                </p>
            )}
        </div>
    );
};

export default QrReader;

Style: Create QrStyles.css on the same folder

.qr-reader {
    width: 430px;
    height: 430px;
    margin: 0 auto;
    position: relative;
}

.qr-reader video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qr-reader .qr-box {
    width: 100% !important;
    left: 0 !important;
}

.qr-box.scan-region-highlight {
    height: 0px !important;
}

.qr-reader .qr-frame {
    position: absolute;
    fill: none;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(0);
}

/* Media Queries for mobile screens */
@media (max-width: 426px) {
    .qr-reader {
        width: 100%;
        height: 76vw;
    }

    .qr-reader .qr-frame {
        transform: translateX(-50%) translateY(-10%);
    }
}

Congratulations! You've built a basic QR code scanner using ReactJS. This is a powerful tool that you can integrate into your React applications to enable features like attendance tracking, product verification, or even hidden message decoding in games. With some additional development, you can customize the scanner's appearance, handle different scan results, and integrate it seamlessly into your React projects.

This article was created with the assistance of Gemini.