DEV Community: popoola Temitope

How to Integrate WebAuthn in Next.js

popoola Temitope — Mon, 01 Dec 2025 17:25:43 +0000

Passwords have long been the weakest link in digital security because they're easy to forget, often reused, and highly susceptible to phishing and data breaches. As users and developers seek more secure and user-friendly alternatives, WebAuthn (Web Authentication API) has emerged as a powerful standard for modern, hardware-backed authentication in today’s applications.

In this tutorial, you’ll learn how to integrate WebAuthn into a Next.js application, enabling users to register and log in using passkeys such as fingerprints, Face ID, or security keys directly from their devices.

The GIF below shows how the application we’re building will work.

Prerequisites

To follow along with this tutorial, ensure you meet the following requirements:

Node.js
MySQL installed and running
Basic knowledge of Next.js
A device with Biometric (Face ID, fingerprint) enabled

What is WebAuthn?

WebAuthn (Web Authentication API) is a modern web standard and part of the FIDO2 project that enables secure, passwordless authentication using public key cryptography. Supported by all major browsers and platforms, it offers a strong alternative to traditional passwords.

Unlike passwords, which can be stolen, reused, or phished, WebAuthn uses unique, device-bound credentials. Authentication occurs locally with a securely stored private key on the user’s device, while only the public key is stored on the server.

WebAuthn allows users authenticate using:

Biometrics (e.g., Face ID, fingerprint scanners)
Hardware security keys (e.g., YubiKey, Titan Security Key)
Built-in device credentials (e.g., Windows Hello, macOS Touch ID)

Create new next.js project

To get started with the application, let’s create a new next.js project. To do that, on your terminal, navigate to the directory that you want to create the project and run the command below.

npx create-next-app@latest webauthn-nextjs
cd webauthn-nextjs

after creating the project, let's start the application by runing the command below.

npm run develop

Install Webauthn Dependencies

For the application to use passkeys like service fingerprint, face id etc, you need to install @simplewebauthn dependencies that allow javascript applications to use WebAuthn. To do that, run the command below to install both the @simplewebauthn/browser and @simplewebauthn/server for the frontend and backend respectively.

npm install @simplewebauthn/browser @simplewebauthn/server

Install other necessary dependencies

Let’s install the mysql2 dependency for the application to store and interact with a MySQL database, and base64url to properly encode and decode data in a URL-safe Base64 format, which is required for WebAuthn data handling:

npm install mysql2 base64url

Setup the database

The application needs to store the user information and passkey details in the database. To set up the database schema, log in to your MySQL server, create a new database named webauthen_demo, and run the query below to create the database schema.

CREATE TABLE users (
  id BINARY(32) NOT NULL,
  username VARCHAR(255) NOT NULL UNIQUE,
  display_name VARCHAR(255) NOT NULL,
  fullname VARCHAR(255) DEFAULT NULL,
  email VARCHAR(255) DEFAULT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB
  DEFAULT CHARSET=utf8mb4
  COLLATE=utf8mb4_general_ci;
CREATE TABLE challenges (
  id INT(11) NOT NULL AUTO_INCREMENT,
  username VARCHAR(255) NOT NULL,
  challenge VARCHAR(255) NOT NULL,
  user_id BINARY(32) NOT NULL,
  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP(),
  PRIMARY KEY (id),
  KEY username (username)
) 
CREATE TABLE credentials (
  id INT(11) NOT NULL AUTO_INCREMENT,
  user_id BINARY(32) NOT NULL,
  credential_id VARBINARY(255) NOT NULL UNIQUE,
  public_key TEXT NOT NULL,
  counter INT(11) NOT NULL DEFAULT 0,
  device_type ENUM('singleDevice', 'multiDevice') NOT NULL,
  backed_up TINYINT(1) NOT NULL DEFAULT 0,
  transports LONGTEXT 
    CHARACTER SET utf8mb4 
    COLLATE utf8mb4_bin 
    DEFAULT NULL 
    CHECK (JSON_VALID(transports)),
  PRIMARY KEY (id),
  KEY user_id (user_id),
  CONSTRAINT credentials_ibfk_1 
    FOREIGN KEY (user_id) 
    REFERENCES users (id) 
    ON DELETE CASCADE
)

From the sql code above, we have:

The users table schema stores user information such as id, username, display_name, fullname, and email.
The credentials table schema stores passkey credential details associated with each user, generated during the registration process.
The challenges table schema stores temporary challenge data used during the login process for passkey validation.

Next, in the Next.js application, let’s establish a connection to the database. To do this, open the project in your preferred code editor. From the project root directory, navigate to the src folder, create a src/lib/db.js file, and add the following code to it.

import mysql from 'mysql2/promise';
export const db = await mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'webauthn_demo',
});

From the code above, replace db_host, db_username, and db_password placeholders with your corresponding MySQL database details.

Create Registration Flow

Let’s create a registration page that allows users to create an account using a passkey, such as a fingerprint, Face ID, or any other method supported by their device.

Creating the Passkey Registration Option API
First, let’s create the generate-registration-options endpoint that will generates a cryptographic challenge and configuration required for passkey (WebAuthn credential) registration and sends them to the frontend so the user’s device can create the passkey.

To do this, create a new file named src/app/api/generate-registration-options/route.js and add the following code.

import { generateRegistrationOptions } from '@simplewebauthn/server';
import { NextResponse } from 'next/server';
import { randomBytes } from 'crypto';
import { db } from '@/lib/db';
export async function POST(req) {
  try {
    const { username } = await req.json();
    if (!username || typeof username !== 'string') {
      return NextResponse.json({ error: 'Valid username is required' }, { status: 400 });
    }
    const trimmed = username.trim();
    const userId = randomBytes(32);
    const options = await generateRegistrationOptions({
      rpName: 'Demo Next App',
      rpID: 'localhost',
      userID: userId,
      userName: trimmed,
      userDisplayName: trimmed,
      timeout: 60000,
      attestationType: 'none',
      authenticatorSelection: {
        userVerification: 'preferred',
        residentKey: 'preferred',
      },
      supportedAlgorithmIDs: [-7, -257],
    });
    await db.execute(
      'INSERT INTO challenges (username, challenge, user_id) VALUES (?, ?, ?)',
      [trimmed, options.challenge, userId]
    );
    await db.execute(
      'DELETE FROM challenges WHERE created_at < (NOW() - INTERVAL 5 MINUTE)'
    );
    return NextResponse.json(options);
  } catch (err) {
    console.error('Error generating registration options:', err);
    return NextResponse.json(
      { error: 'Failed to generate registration options' },
      { status: 500 }
    );
  }
}

From the code above, we have:

The POST function receives a username from the frontend and handles the registration setup request for WebAuthn.
The generateRegistrationOptions method from @simplewebauthn/server creates WebAuthn-compatible registration options, including a cryptographic challenge, relying party information (rpName, rpID), user details, and security preferences.
The generated challenge is stored in the challenges table along with the username and userId. This data will be used later to verify the device’s response when the user completes the registration process.

Creating the Passkey Registration Verification API
We also need to create the verify-registration endpoint, which completes the second half of the WebAuthn registration process by validating the passkey response returned by the user's device and securely storing the credential in the database.
To do this, create a src/app/api/verify-registration/route.js file and add the following code.

import { verifyRegistrationResponse } from '@simplewebauthn/server';
import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function POST(req) {
  try {
    const { username, fullname, email, response: registrationResponse } = await req.json();

    if (!username) {
      return NextResponse.json({ verified: false, error: 'Username is required' }, { status: 400 });
    }
    const trimmed = username.trim();
    const [challengeRows] = await db.execute(
      `SELECT * FROM challenges WHERE username = ? ORDER BY created_at DESC LIMIT 1`,
      [trimmed]
    );
    if (challengeRows.length === 0) {
      return NextResponse.json({ verified: false, error: 'No challenge found' }, { status: 400 });
    }
    const stored = challengeRows[0];
    const verification = await verifyRegistrationResponse({
      response: registrationResponse,
      expectedChallenge: stored.challenge,
      expectedOrigin: 'http://localhost:3000',
      expectedRPID: 'localhost',
      requireUserVerification: false,
    });
    if (!verification.verified || !verification.registrationInfo) {
      return NextResponse.json(
        { verified: false, error: 'Registration verification failed' },
        { status: 400 }
      );
    }
    const {
      credentialDeviceType,
      credentialBackedUp,
    } = verification.registrationInfo;
    const {
      id: credentialID,
      publicKey: credentialPublicKey,
      counter,
      transports,
    } = verification.registrationInfo.credential;
    if (!credentialPublicKey) {
      return NextResponse.json(
        { verified: false, error: 'Missing credentialPublicKey' },
        { status: 500 }
      );
    }
    const [userRows] = await db.execute(
      'SELECT id FROM users WHERE username = ? LIMIT 1',
      [trimmed]
    );
    const userId = userRows.length ? userRows[0].id : stored.user_id;
    if (!userRows.length) {
      await db.execute(
        'INSERT INTO users (id, username, display_name, fullname, email) VALUES (?, ?, ?, ?, ?)',
        [stored.user_id, trimmed, trimmed, fullname || trimmed, email || '']
      );
    }
    const credentialIDBuffer = Buffer.from(credentialID);
    await db.execute(
      `INSERT INTO credentials (
         user_id, credential_id, public_key, counter, device_type, backed_up, transports
       ) VALUES (?, ?, ?, ?, ?, ?, ?)`,
      [
        userId,
        credentialIDBuffer, 
        Buffer.from(credentialPublicKey).toString('base64'),
        counter,
        credentialDeviceType,
        credentialBackedUp,
        JSON.stringify(transports || ['internal', 'hybrid']), 
      ]
    );
    await db.execute('DELETE FROM challenges WHERE username = ?', [trimmed]);
    return NextResponse.json({ verified: true, message: 'Registration successful' });
  } catch (err) {
    return NextResponse.json(
      { verified: false, error: 'Internal server error during verification' },
      { status: 500 }
    );
  }
}

From the code above, we have:

The POST function receives the username, fullname, email, and registrationResponse (passkey credential response) from the frontend request body.
The verifyRegistrationResponse method from @simplewebauthn/server validates the credential. If the credential is valid, the user details and passkey credential are securely stored in the database.

Creating the Registration Interface
Now, let’s create the user registration interface and connect it to the generate-registration-options and verify-registration endpoints so users can register using a passkey.
To do this, create a new file named src/app/register/page.js and add the following code:

'use client';
import { useState } from 'react';
import Link from 'next/link';
import { startRegistration } from '@simplewebauthn/browser';
export default function RegisterPage() {
  const [username, setUsername] = useState('');
  const [fullname, setFullname] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const handleRegister = async () => {
    if (!username.trim() || !fullname.trim() || !email.trim()) {
      setMessage('❌ Please fill out all fields');
      return;
    }
    setIsLoading(true);
    setMessage('');
    try {
      const payload = {
        username: username.trim(),
        fullname: fullname.trim(),
        email: email.trim(),
      };
      const optionsRes = await fetch('/api/generate-registration-options', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!optionsRes.ok) {
        const err = await optionsRes.json();
        setMessage(`❌ ${err.error || 'Registration failed'}`);
      }
      const options = await optionsRes.json();
      const attResp = await startRegistration(options);
      const verifyRes = await fetch('/api/verify-registration', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...payload, response: attResp }),
      });
      if (!verifyRes.ok) {
        const err = await verifyRes.json();
        setMessage(`❌ ${err.error || 'Verification failed'}`);
      }
      const verification = await verifyRes.json();
      if (verification.verified) {
        setMessage('✅ Registration successful!');
      } else {
        setMessage(`❌ Registration failed: ${verification.error || 'Unknown error'}`);
      }
    } catch (err) {
      console.error('Registration error:', err);
      if (err.name === 'NotSupportedError') {
        setMessage('❌ WebAuthn not supported on this device/browser');
      } else if (err.name === 'NotAllowedError') {
        setMessage('❌ Registration cancelled or not allowed');
      } else if (err.name === 'AbortError') {
        setMessage('❌ Registration timed out');
      } else {
        setMessage(`⚠️ Error: ${err.message}`);
      }
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="card shadow-sm">
            <div className="card-body">
              <h2 className="card-title text-center mb-4">Register</h2>
              <div className="mb-3">
                <input
                  type="text"
                  className="form-control"
                  placeholder="Full Name"
                  value={fullname}
                  onChange={(e) => setFullname(e.target.value)}
                  disabled={isLoading}
                />
              </div>
              <div className="mb-3">
                <input
                  type="email"
                  className="form-control"
                  placeholder="Email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={isLoading}
                />
              </div>
              <div className="mb-4">
                <input
                  type="text"
                  className="form-control"
                  placeholder="Username"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  disabled={isLoading}
                />
              </div>
              <button
                onClick={handleRegister}
                disabled={isLoading || !username.trim()}
                className="btn btn-primary w-100 mb-3"
              >
                {isLoading ? 'Registering...' : 'Register'}
              </button>
              {message && (
                <div
                  className={`alert ${
                    message.includes('✅')
                      ? 'alert-success'
                      : 'alert-danger'
                  } text-center`}
                  role="alert"
                >
                  {message}
                </div>
              )}
              <p className="text-center mt-4">
                Already have an account?{' '}
                <Link href="/login" className="text-decoration-none">
                  Login here
                </Link>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

In the code above, we create a simple registration form that allows users to register using a passkey, such as fingerprint or Face ID, as shown in the screenshot below.

Create the Login Flow

Let’s implement the login flow that allows users to log in using a passkey. To do this, we’ll create the necessary API endpoints and user interface as follow:

Creating the Login Passkey Option API
First, let’s create an endpoint that allows users to retrieve and validate their saved passkey. To do this, create a new file named src/app/api/generate-authentication-options/route.js and add the following code.

import { generateAuthenticationOptions } from '@simplewebauthn/server';
import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function POST(req) {
  try {
    const { username } = await req.json();
    if (!username) {
      return NextResponse.json({ error: 'Username is required' }, { status: 400 });
    }
    const trimmed = username.trim();
    const [userRows] = await db.execute(
      'SELECT id FROM users WHERE username = ? LIMIT 1',
      [trimmed]
    );
    if (userRows.length === 0) {
      return NextResponse.json({ error: 'User not found' }, { status: 404 });
    }
    const userId = userRows[0].id;
    const [credRows] = await db.execute(
      `SELECT credential_id, transports FROM credentials WHERE user_id = ?`,
      [userId]
    );
    if (credRows.length === 0) {
      return NextResponse.json({ error: 'No credentials found for user' }, { status: 404 });
    }
    const options = await generateAuthenticationOptions({
      timeout: 60000,
      rpID: 'localhost',
      userVerification: 'preferred',
    });
    await db.execute(
      `INSERT INTO challenges (username, challenge, user_id) VALUES (?, ?, ?)`,
      [trimmed, options.challenge, userId]
    );
    return NextResponse.json(options);
  } catch (err) {
    return NextResponse.json({ error: 'Failed to generate authentication options' }, { status: 500 });
  }
}

From the code above, we retrieve the username from the frontend, use the generateAuthenticationOptions method to create authentication options for passkey login, and store the challenge in the database for later verification.

Creating the Passkey Verification API
Now, let’s create a route to verify the login passkey challenge. To do this, create a src/app/api/verify-authentication/route.js file and add the following code.

import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function POST(req) {
  try {
    const body = await req.json();
    const { username } = body;
    const credential = body;
    if (!username || !credential.rawId) {
      return NextResponse.json(
        { verified: false, error: 'Missing username or rawId' },
        { status: 400 }
      );
    }
    const trimmed = username.trim();
    const rawIdString = credential.rawId;
    let credRows;
    [credRows] = await db.execute(
      `SELECT * FROM credentials WHERE credential_id = ? LIMIT 1`,
      [Buffer.from(rawIdString, 'utf8')]
    );
    if (!credRows || credRows.length === 0) {
      const rawIdBuffer = Buffer.from(rawIdString, 'base64url');
      [credRows] = await db.execute(
        `SELECT * FROM credentials WHERE credential_id = ? LIMIT 1`,
        [rawIdBuffer]
      );
    }
    if (!Array.isArray(credRows) || credRows.length === 0) {
      return NextResponse.json(
        { verified: false, error: 'Credential not found' },
        { status: 400 }
      );
    }
    const row = credRows[0];
    if (!row || !row.public_key) {
      return NextResponse.json(
        { verified: false, error: 'Invalid credential entry' },
        { status: 500 }
      );
    }
    const [challengeRows] = await db.execute(
      `SELECT * FROM challenges WHERE username = ? ORDER BY created_at DESC LIMIT 1`,
      [trimmed]
    );
    if (!challengeRows || challengeRows.length === 0) {
      return NextResponse.json(
        { verified: false, error: 'No challenge found' },
        { status: 400 }
      );
    }
    await db.execute('DELETE FROM challenges WHERE username = ?', [trimmed]);
    return NextResponse.json({
      verified: "verified",
      message:'Login successful',
    });
  } catch (err) {
    return NextResponse.json(
      { verified: false, error: err.message || 'Server error' },
      { status: 500 }
    );
  }
}

From the code above, the username and passkey credential are retrieved from the frontend, the associated credential is fetched from the database and validated, and a success or failure response is returned.

Creating the Login Interface
Now, let’s create the login interface for the application. To do this, create a new file named src/app/login/page.js and add the following code.

'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { startAuthentication } from '@simplewebauthn/browser';
export default function LoginPage() {
  const [username, setUsername] = useState('');
  const [status, setStatus] = useState('');
  const router = useRouter();
  const handleLogin = async () => {
    setStatus('🔐 Starting authentication...');
    try {
      const optionsRes = await fetch('/api/generate-authentication-options', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username }),
      });
      if (!optionsRes.ok) {
        const error = await optionsRes.json();
        setStatus(`❌${error.error}`);
        return;
      }
      const options = await optionsRes.json();
      const authResp = await startAuthentication(options);
      const verifyRes = await fetch('/api/verify-authentication', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          username,
          ...authResp,
        }),
      });
      const verifyJSON = await verifyRes.json();
      if (verifyJSON.verified) {
        setStatus('✅ Login successful!');
        localStorage.setItem('Username', username);
        router.push('/profile');
      } else {
        setStatus(`❌ Login failed: ${verifyJSON.error || 'Verification failed'}`);
      }
    } catch (err) {
      setStatus('⚠️ Error during login');
    }
  };
  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="card shadow-sm">
            <div className="card-body">
              <h1 className="card-title text-center mb-4">Login with Passkey</h1>
              <div className="mb-3">
                <input
                  type="text"
                  className="form-control"
                  placeholder="Enter username"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
              </div>
              <button
                onClick={handleLogin}
                className="btn btn-primary w-100 mb-3"
              >
                Login
              </button>
              {status && (
                <div
                  className={`alert text-center ${
                    status.includes('✅')
                      ? 'alert-success'
                      : status.includes('❌')
                      ? 'alert-danger'
                      : 'alert-info'
                  }`}
                  role="alert"
                >
                  {status}
                </div>
              )}
              <p className="text-center mt-4">
                Don&apos;t have an account?{' '}
                <Link href="/register" className="text-decoration-none">
                  Register here
                </Link>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

In the code above, we created a login form with a username input field and used the handleLogin() function to send a request to the /api/generate-authentication-options endpoint, which returns the passkey options.

These options are passed to startAuthentication(), prompting the user to authenticate with their passkey. The result is then sent to src/api/verify-authentication for validation before the user is redirected to their profile.

Creating the User Profile API

Next, let’s create an endpoint that fetches user profile details from the database and returns them to the frontend. To do this, create a new file named src/app/api/user-profile/route.js and add the following code.

import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function POST(req) {
  try {
    const body = await req.json();
    const { username } = body;
    if (!username || typeof username !== 'string') {
      return NextResponse.json(
        { error: 'Username is required' },
        { status: 400 }
      );
    }
    const [rows] = await db.execute(
      'SELECT username, email FROM users WHERE username = ? LIMIT 1',
      [username.trim()]
    );
    if (!rows || rows.length === 0) {
      return NextResponse.json(
        { error: 'User not found' },
        { status: 404 }
      );
    }
    return NextResponse.json(rows[0]);
  } catch (err) {
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}

Creating the Profile Interface

Finally, let’s create a profile page that displays the logged-in user’s details. To do this, create a new file named src/app/profile/page.js and add the following code.

'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
export default function ProfilePage() {
  const [username, setUsername] = useState('');
  const [profile, setProfile] = useState(null);
  const [error, setError] = useState('');
  const router = useRouter();
  useEffect(() => {
    const storedUsername = localStorage.getItem('Username');
    if (!storedUsername) {
      router.push('/login');
      return;
    }
    setUsername(storedUsername);
    const fetchProfile = async () => {
      try {
        const res = await fetch('/api/user-profile', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ username: storedUsername }),
        });
        if (!res.ok) {
          const errData = await res.json();
          throw new Error(errData.error || 'Failed to fetch profile');
        }
        const data = await res.json();
        setProfile(data);
      } catch (err) {
        setError(err.message);
      }
    };
    fetchProfile();
  }, [router]);
  const handleLogout = () => {
    localStorage.removeItem('Username');
    router.push('/login');
  };
  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="card shadow">
            <div className="card-body">
              <h3 className="card-title text-center mb-4">👤 Profile</h3>
              {error ? (
                <>
                  <div className="alert alert-danger text-center" role="alert">
                    {error}
                  </div>
                  <button
                    className="btn btn-danger w-100"
                    onClick={handleLogout}
                  >
                    Logout
                  </button>
                </>
              ) : !profile ? (
                <p className="text-center">Loading...</p>
              ) : (
                <>
                  <ul className="list-group list-group-flush mb-4">
                    <li className="list-group-item">
                      <strong>Username:</strong> {profile.username}
                    </li>
                    <li className="list-group-item">
                      <strong>Email:</strong> {profile.email}
                    </li>
                    <li className="list-group-item">
                      <strong>Joined:</strong> popoola
                    </li>
                  </ul>
                  <button
                    className="btn btn-danger w-100"
                    onClick={handleLogout}
                  >
                    Logout
                  </button>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

The code above retrieves the logged-in username from local storage and uses it to fetch user details from the src/api/user-profile endpoint, then displays the data in the user profile interface. The screenshot below shows the user profile page.

Testing The Application

To test the application, open http://localhost:3000/register in your browser and create an account. The application should behave as shown in the GIF below.

Conclusion

Integrating WebAuthn into a Next.js application offers a secure, modern way for users to authenticate using biometrics or hardware keys, eliminating the need for traditional passwords.

In this tutorial, we implemented the full flow, from user registration and passkey creation to login and credential verification. By using @simplewebauthn and Next.js API routes, you can create a seamless, passwordless authentication experience that enhances both security and user experience.

Build a Virtual Classroom App with Real-Time Transcription in React Native

popoola Temitope — Tue, 18 Nov 2025 17:25:51 +0000

In virtual learning and streaming platforms, real-time transcription improves accessibility for students and viewers with hearing impairments, enhances comprehension, and provides accurate lesson records.
In this tutorial, you’ll learn how to build a virtual classroom app with real-time transcription in React Native, using the Stream Video and Audio SDK for livestreaming and AssemblyAI for transcription.
Demo image:

Prerequisites

To follow along with this tutorial, you should have:

Node.js and npm installed
A Stream account (create a free account or log in to your dashboard)
An AssemblyAI account (create a free account or log in to your dashboard) ## Setting up the Project

To get started, create a new React Native project. Open your terminal, navigate to your desired directory, and run the command below.

npx @react-native-community/cli@latest init virtual_class_app

Installing Stream SDK

To enable the application to interact with Stream services, install the Stream SDK using the command below.

npm install @stream-io/video-react-native-sdk @stream-io/react-native-webrtc
npm install react-native-svg @react-native-community/netinfo @notifee/react-native
# Install pods for iOS
npx pod-install

Next, you need to configure the application’s access to the camera and microphone. To do this, add the following permissions to the AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-feature android:name="android.hardware.camera" />
  <uses-feature android:name="android.hardware.camera.autofocus" />
  <uses-feature android:name="android.hardware.audio.output" />
  <uses-feature android:name="android.hardware.microphone" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  <uses-permission android:name="android.permission.INTERNET" />
  ...
  <application
    ...
  />
  </application>
</manifest>

Also, add the following keys and values to the Info.plist file under the <dict> tag.

<plist version="1.0">
<dict>
  ...
  <key>CFBundleName</key>
  <string>$(PRODUCT_NAME)</string>
  <key>NSCameraUsageDescription</key>
  <string>$(PRODUCT_NAME) needs camera access for broadcasting</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>$(PRODUCT_NAME) requires microphone access in order to capture and transmit audio</string>
  ...
</dict>
</plist>

How to Retrieve Stream API Keys

To access your Stream API key and secret, log in to your Stream dashboard and create a new app as shown below.

After creating the app, on the project dashboard, click API keys in the top menu, then copy the Stream API key and Secret key, as shown below.

How to Retrieve AssemblyAI API Key

You will need an AssemblyAI API key to transcribe a livestream. Log in to the AssemblyAI API key page to retrieve your API key, as shown in the screenshot below.

Creating the Application Backend

Next, you’ll create an application server to handle Stream token generation and WebSocket connections for livestream transcription. To do this, create a new folder named backend outside the React Native folder, then run the following command to set it up and install the required packages.

npm init -y
npm install express cors ws node-fetch @stream-io/node-sdk

Now, create an API endpoint to handle Stream token generation and livestream transcription using WebSockets. Inside the backend folder, create a new file named app.js and add the following code.

const express = require('express');
const cors = require('cors');
const WebSocket = require('ws');
const fetch = (...args) => import('node-fetch').then(({ default: fetch }) => fetch(...args));
const { StreamClient } = require('@stream-io/node-sdk');
const app = express();
app.use(express.json());
app.use(cors());
const apiKey = '<strem_key>';
const apiSecret = '<stream_Secret >';
const ASSEMBLYAI_API_KEY = '<assemblyai_apikey>';
const serverClient = new StreamClient(apiKey, apiSecret);
app.get('/token', async (req, res) => {
  const userId = String(req.query.user_id || '').trim();
  const callId = String(req.query.call_id || '').trim();
  if (!userId || !callId) {
    return res.status(400).json({ error: 'Missing user_id or call_id' });
  }
  try {
    const role = userId.startsWith('host') ? 'admin' : 'user';
    await serverClient.upsertUsers([{ id: userId, role }]);
    const token = serverClient.generateUserToken({ user_id: userId });
    res.json({ token, callId });
  } catch (err) {
    res.status(500).json({ error: 'Could not generate token' });
  }
});
const server = app.listen(3000, () => {
  console.log('Server running on port 3000');
});
const audioWSS = new WebSocket.Server({ noServer: true });
const viewerWSS = new WebSocket.Server({ noServer: true }); 
let aaiSocket = null;
server.on('upgrade', (req, socket, head) => {
  if (req.url === '/audio') {
    audioWSS.handleUpgrade(req, socket, head, (ws) => {
      audioWSS.emit('connection', ws, req);
    });
  } else if (req.url === '/captions') {
    viewerWSS.handleUpgrade(req, socket, head, (ws) => {
      viewerWSS.emit('connection', ws, req);
    });
  } else {
    socket.destroy();
  }
});
async function connectAssemblyAI() {
  try {

    const tokenResp = await fetch('https://api.assemblyai.com/v2/realtime/token', {
      method: 'POST',
      headers: { authorization: ASSEMBLYAI_API_KEY },
    });
    const { token } = await tokenResp.json();
    aaiSocket = new WebSocket(`wss://api.assemblyai.com/v2/realtime/ws?sample_rate=16000&token=${token}`);
    aaiSocket.on('open');
    aaiSocket.on('message', (msg) => {
      try {
        const data = JSON.parse(msg);
        if (data.text) {
          console.log('Transcript:', data.text);
          viewerWSS.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
              client.send(JSON.stringify({ text: data.text }));
            }
          });
        }
      } catch (err) {
        console.error('Error parsing AssemblyAI message:', err);
      }
    });
    aaiSocket.on('close', () => {
      setTimeout(connectAssemblyAI, 5000);
    });
  } catch (err) {
    setTimeout(connectAssemblyAI, 5000);
  }
}
connectAssemblyAI();
audioWSS.on('connection', (ws) => {
  ws.on('message', (message) => {
    if (aaiSocket && aaiSocket.readyState === WebSocket.OPEN) {
      aaiSocket.send(JSON.stringify({ audio_data: message.toString() }));
    }
  });
  ws.on('close');
});
viewerWSS.on('connection', (ws) => {
  ws.send(JSON.stringify({ text: 'Connected to captions server' }));
});

In the code above, the /token endpoint authenticates users by generating Stream tokens using @stream-io/node-sdk. The /audio and /captions endpoints handle real-time transcription using WebSockets by connecting to AssemblyAI. Replace the <stream_key>, <stream_secret>, and <assemblyai_apikey> placeholders with their respective values in the code.

Creating the App Home Screen

Next, you’ll create the home screen that lets users create or join a call using a call ID. To do this, open the App.tsx file and replace its code with the following:

import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet, TextInput } from 'react-native';
import HostScreen from './src/HostScreen';
import ViewerScreen from './src/ViewerScreen';
const API_KEY = '<strem_key>';
export default function App() {
  const [role, setRole] = useState(""); 
  const [token, setToken] = useState<string | null>(null);
  const [callId, setCallId] = useState("");
  const [inputCallId, setInputCallId] = useState("");
  useEffect(() => {
    if (!role || !callId) return;

    fetch(`http://localhost:3000/token?user_id=${role}-user&call_id=${callId}`)
      .then(res => res.json())
      .then(data => setToken(data.token))
      .catch(err => console.error("Token fetch error:", err));
  }, [role, callId]);
  if (!role) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Enter Call ID:</Text>
        <TextInput
          style={styles.input}
          placeholder="Enter call ID"
          value={inputCallId}
          onChangeText={setInputCallId}
        />
        <Button 
          title="Join as Host" 
          onPress={() => { 
            if (inputCallId.trim()) {
              setRole('host'); 
              setCallId(inputCallId.trim()); 
            }
          }} 
        />
        <View style={{ height: 10 }} />
        <Button 
          title="Join as Viewer" 
          onPress={() => { 
            if (inputCallId.trim()) {
              setRole('viewer'); 
              setCallId(inputCallId.trim()); 
            }
          }} 
        />
      </View>
    );
  }
  if (!token) {
    return (
      <View style={styles.container}>
        <Text>Loading token...</Text>
      </View>
    );
  }
  if (role === 'host') {
    return (
      <HostScreen
        apiKey={API_KEY}
        user={{ id: 'host-user' }}
        token={token}
        callId={callId}
      />
    );
  }
  return (
    <ViewerScreen
      apiKey={API_KEY}
      user={{ id: 'viewer-user' }}
      token={token}
      callId={callId}
    />
  );
}
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 20, marginBottom: 20 },
  input: { 
    borderWidth: 1, 
    borderColor: '#ccc', 
    padding: 10, 
    width: '80%', 
    marginBottom: 20, 
    borderRadius: 5 
  }
});

Creating the Caption Component

Next, you need to create a Captions component that connects to the backend via a WebSocket for real-time transcription. To do this, create a new file named Captions.js in the src folder and add the following code.

import React, { useEffect, useState, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Captions() {
  const [transcript, setTranscript] = useState('');
  const wsRef = useRef(null);
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:3000/captions');
    wsRef.current = ws;
    ws.onopen = () => console.log('Connected to captions server');

    ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        if (data.text) {
          setTranscript(data.text);
        }
      } catch (err) {
        console.error('Error parsing caption data:', err);
      }
    };
    ws.onerror = (err) => console.error('Caption WS error:', err);
    ws.onclose = () => console.log('Caption connection closed');
    return () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
    };
  }, []);
  if (!transcript) return null;
  return (
    <View style={styles.container}>
      <Text style={styles.text}>how are you doin1g</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: '20%',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  text: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
    textShadowColor: '#000',
    textShadowRadius: 4,
  },
});

How to Create the Host Screen

Let’s create the host screen to allow the host to start a live class using a call ID, with video, audio, and real-time captions enabled. To do this, create a src/HostScreen.js file and add the following code:

import React, { useEffect } from 'react';
import { StreamVideo, StreamVideoClient, StreamCall, HostLivestream } from '@stream-io/video-react-native-sdk';
export default function HostScreen({ apiKey, user, token, callId }) {
  const client = new StreamVideoClient({ apiKey, user, token });
  const call = client.call('livestream', callId);
  useEffect(() => {
    call.join({ create: true }).catch(console.error);
  }, [call]);
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <HostLivestream />
      </StreamCall>
    </StreamVideo>
  );
}

How to Create the Viewer Screen

Next, create a viewer screen that lets students join a live class using a call ID, with real-time captions enabled. To do this, create a src/ViewerScreen.js file and add the following code.

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { StreamVideo, StreamVideoClient, StreamCall, LivestreamPlayer } from '@stream-io/video-react-native-sdk';
import Captions from './Captions';
export default function ViewerScreen({ apiKey, user, token, callId }) {
  const [client, setClient] = useState(null);
  const [call, setCall] = useState(null);
  useEffect(() => {
    const videoClient = new StreamVideoClient({ apiKey, user, token });
    const videoCall = videoClient.call('livestream', callId);

    videoCall.join().then(() => {
      console.log('Joined call as viewer');
    }).catch(err => {
      console.error('Error joining call:', err);
    });
    setClient(videoClient);
    setCall(videoCall);
    return () => {
      videoCall.leave().catch(console.error);
    };
  }, [apiKey, user, token, callId]);
  if (!client || !call) {
    return (
      <View style={styles.container}>
        <Text>Connecting to stream...</Text>
      </View>
    );
  }
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <LivestreamPlayer callType="livestream" callId={callId} />
        <Captions call={call} />
      </StreamCall>
    </StreamVideo>
  );
}
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});

In your terminal, run the command below to start the React Native app:

npm run ios

npm run android

Testing the Application

Open the app, enter the call ID, and click “Join as host.” After starting the virtual class, open the app on another device, enter the same call ID, and join as a viewer. Once you join the call as a viewer, the host’s audio will be transcribed in real time, as shown in the image below.

Conclusion

In this tutorial, you learned how to build a virtual classroom app with real-time transcription using React Native, Stream’s Video and Audio SDK, and AssemblyAI. This setup allows teachers to host livestream classes with live captions, enhancing accessibility and comprehension for all students.

Want to keep building? Consider adding:

Happy coding! 🛠️

Why GraphQL is gaining adoption

popoola Temitope — Sat, 27 Sep 2025 22:54:47 +0000

In modern software architecture,Jamstack separates the frontend from the backend through API consumption. Traditionally, this has been achieved with RESTful APIs, which enable data exchange between server and client.

However, REST often causes performance issues, such as over-fetching and added complexity. A client may need only a small subset of data, but a REST endpoint might return an entire dataset, which can slow applications and increase bandwidth usage.

GraphQL addresses these challenges by allowing the frontend to request exactly the data it needs in a single query, which reduces unnecessary network calls, avoids unnecessary data in the response, and improves performance.

Key Features Driving GraphQL Adoption

GraphQL provides powerful features that address the limitations of REST, making it an attractive approach for modern applications. Below are some of the key features driving its adoption in software development.
Fetching Precise Data
GraphQL lets clients request only the fields they need, which reduces payload size, improves response speed, and conserves resources, especially in low-bandwidth environments.
Single Query Across Multiple Sources
Modern applications often pull data from microservices, databases, and third-party APIs. GraphQL combines these sources into a single query, eliminating the need for multiple REST calls and simplifying frontend logic.
Strong Typing and Schema-Driven Design
GraphQL APIs are defined by a schema with strict typing, making them self-descriptive, consistent, and validated by default. This schema-first approach reduces errors, streamlines collaboration, and provides predictable interfaces.
Real-Time Capabilities
GraphQL subscriptions deliver live updates when data changes, enabling interactive use cases such as chat applications, collaborative editing, and analytics dashboards—areas where RESTful APIs often fall short.
Introspection and Tooling
GraphQL supports introspection, allowing developers to query the schema itself. With tools like GraphiQL, Apollo Studio, and Relay, onboarding is improved, debugging is simplified, and developer productivity is enhanced.

Benefits of GraphQL

Beyond its core features, GraphQL delivers significant benefits that appeal to both developers and organizations.

Optimized Performance: By allowing clients to request only the fields they need, GraphQL reduces payload size and unnecessary data transfers, making applications faster, more responsive, and more efficient, particularly for mobile users and low-connectivity environments.
Improved Developer Experience: GraphQL’s strong typing, introspection, and tools like GraphiQL or Apollo Studio provide real-time feedback and documentation. This reduces guesswork, speeds up onboarding, and helps teams build and debug more efficiently.
Flexible API Evolution: GraphQL APIs can evolve without breaking existing clients. Developers can add or deprecate fields gradually, maintaining backward compatibility and lowering long-term maintenance costs.
Simplified Data Integration: GraphQL unifies data from multiple sources, including microservices, databases, and third-party APIs, into a single query, thereby reducing the need for multiple REST calls and simplifying frontend logic.
Cross-Platform Efficiency: GraphQL delivers tailored responses for different platforms. A mobile app can fetch only lightweight data for optimal performance, whereas a desktop app can request richer information in a single query.
Real-Time Functionality: With subscriptions, GraphQL enables live updates for features like notifications, activity feeds, and collaborative tools—use cases where REST typically struggles.

Challenges and Limitations

Learning Curve: Developers must learn concepts like schemas, resolvers, and query complexity. Adopting a schema-first mindset can slow initial onboarding and require training.
Performance Management: Complex or deeply nested queries can overload servers if not controlled. Techniques like query depth limiting, cost analysis, and caching are needed to prevent bottlenecks.
Caching: REST’s endpoint-based caching is simple, but GraphQL requires advanced strategies such as persisted queries or third-party caching layers to remain efficient.
Over-Engineering: For small projects, the setup of schemas, resolvers, and server infrastructure may add unnecessary complexity compared to REST.
Tooling and Monitoring: GraphQL’s ecosystem is growing, but monitoring queries, tracking performance, and applying security best practices are less mature and standardized than in REST.

The Future of GraphQL

Federation and Distributed Systems: GraphQL federation will simplify the management of schemas across large-scale, microservice-driven systems.
Hybrid API Strategies: Many companies are adopting GraphQL alongside REST, choosing the right tool for each use case rather than fully replacing one with the other.
Expanding Ecosystem: Tools like Apollo, Hasura, and GraphQL Yoga continue to mature, lowering adoption barriers and improving developer productivity.
Adoption in Enterprise and Headless Architectures: GraphQL is becoming a standard in headless CMSs, e-commerce platforms, and enterprises that need to unify complex data sources.
Broader Community Support: With increasing contributions from major tech companies and open-source communities, GraphQL is likely to remain a core technology in modern API design.

Conclusion

GraphQL is gaining adoption because it solves key challenges of REST APIs, including over-fetching, reduces multiple endpoints, and limited flexibility. By enabling precise data fetching, simplifying integration, and improving the developer experience, it has become a powerful tool for modern, data-driven applications.

Although challenges like caching, performance management, and setup complexity remain, the expanding ecosystem and community support are addressing them. With its ability to evolve APIs, deliver real-time capabilities, and unify data across complex systems, GraphQL is poised to become a cornerstone of future web and mobile development.

Managing Vue State With Pinia ORM

popoola Temitope — Sat, 21 Oct 2023 00:59:04 +0000

This article was originally published on OpenReplay blog.
State management is an important part of building any web application. While Vue provides techniques for managing simple states, handling states may become more challenging as the application grows in complexity. This is why libraries like Pinia are created to enhance Vue's basic state management capabilities. However, using Pinia in large-scale applications may present challenges, which is why ORM libraries are recommended to deal with the complexity of state management in large projects.

The Pinia ORM package helps prevent single-tree state drawbacks by effectively working with the Vue state. This tutorial will explore Pinia ORM features and how to use them in your Vue application.

As a prerequisite to this tutorial, I assume you are familiar with Vue.js and Pinia and have Node.js installed on your computer.

Overview of Pinia ORM

ORM (Object-Relational Mapping) is a method of managing and organizing state data in a Vue application by treating it as objects in the code rather than handling it manually. It lets you think about your application state in terms of models, bringing the familiarity of typical database CRUD operations to your vue application.

Pinia ORM is an abstraction of the Pinia state management library that allows developers to interact with the Pinia store as a database object rather than a plain state. It allows developers to manipulate and query data in a way that will improve the application's performance.

Setting up Pinia ORM in a Vue Project

This section will go through configuring Pinia ORM in a new Vue project. Open your terminal, then navigate to the directory where you want to install the project, and run the command below.

npm init vue@latest

Running the above command will prompt you to select your application features. I’ll set the application features for this tutorial, as shown in the screenshot below.

After selecting the application features, enter the following commands.

cd vue-app
npm install
npm run dev

Now you should have your application up and running, as shown below:

Pinia ORM installation

You can install Pinia ORM using the NPM package. On your terminal, navigate to the project folder and enter the command below to install Pinia ORM.

npm install pinia pinia-orm --save

Creating Pinia Database Model

Pinia ORM model represents application data structure. Models are used to define the database tables and columns along with their initial value and data type.

Let's demonstrate how Pinia ORM Model works by creating a simple database(friendship). The database will contain one table (friends) and five columns (id, username, fullname, age and email).

In your project root directory, navigate to the src directory, create a friendship.js file, and add the following code.

// friendship.js
// Friend Model

import { Model } from "pinia-orm";

export default class Friend extends Model {
  // entity is a required property for all models.
  static entity = "friends";

  static fields() {
    return {
      id: this.uid(),
      Username: this.string(""),
      Fullname: this.string(""),
      Age: this.string(""),
      Email: this.string(""),
    };
  }
}

From the code above, the entity is the database table name friends, while the table columns are passed into the fields method.

Pinia ORM database registration

Now that we have successfully created the database’s table, we need to register the database in our component before accessing the Pinia ORM features. Inside the src folder, create a new component called Myfriends.vue file and add the following code.

// src/components/Myfriends.vue
<script>
  import { useRepo } from "pinia-orm";
  import { createPinia } from "pinia";
  import { createORM } from "pinia-orm";
  import Friend from "../stores/friendship";
  const pinia = createPinia().use(createORM());
  const useRepo1 = useRepo(Friend, pinia);
</script>

In the code above, we imported: useRepo, createPinia, createORM, and Friend. Next, we create an instance of the Pinia ORM and register the database using the useRepo method, which takes two arguments: Friend and Pinia.

Inserting Data into the database

Pinia ORM uses the save() method to add new records to the database table. Pinia ORM save() syntax is as follows:

useRepo(Friend, pinia).save({
   column1: “data 1”,
   column2: “data 2”,
   // ...
   columnN: “data n”,
});

The above code will insert a new record into the table(Friend). If any table columns are omitted, the initial value of the column will be added to the database.

In the Myfriends.vue component, we can ask the users to enter their friend's details and use the Pinia ORM save() method to save the data into the database. To do that, update Myfriends.vue with the following code.

// src/components/Myfriends.vue
<script>
import { useRepo } from "pinia-orm";
import { createPinia } from "pinia";
import { createORM } from "pinia-orm";
import Friend from "../stores/friendship";
const pinia = createPinia().use(createORM());

const useRepo1 = useRepo(Friend, pinia);

export default {
  data() {
    return {
      form: {
        username: "",
        fullname: "",
        age: "",
        email: "",
      },
    };
  },

  methods: {
    addfriend() {
      useRepo1.save({
        Username: this.form.username,
        Fullname: this.form.fullname,
        Age: this.form.age,
        Email: this.form.email,
      });
      console.log(useRepo1.all());
    },
  },
};
</script>
<template>
  <div>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <center>
      <div
        style="
          width: 100%;
          height: 60px;
          margin-bottom: 20px;
          margin-top: 100px;
        "
      >
        <div>
          <label for="">Username</label>
          <input v-model="form.username" />
          <label for="">Fullname</label>
          <input v-model="form.fullname" /> <br />
          <br />
          <label for="">Age</label>
          <input v-model="form.age" />
          <label for="">Email</label>
          <input v-model="form.email" />
          <br /><br />
          <button @click="addfriend" class="btn-link">Add Friend</button>
        </div>
        <br /><br /><br />
      </div>
    </center>
  </div>
</template>

Refresh the application in your browser; you should have the following output:

Getting Data from the database

Pinia ORM uses the all() method to retrieve data from the database, which will fetch all data from the database. The all() method can be used as follow:

const useRepo1 = useRepo(Friend, pinia).all()

The code above will fetch all the records in the database in ascending order. Still, we can use the useCollect from the Pinia ORM module to sort the data and perform some operations on the data, as follows.

import { useCollect } from 'pinia-orm/dist/helpers' //.. const useRepo1 =
useRepo(Friend, pinia).all() // sort the record by 'Username' attributes
useCollect(useRepo1).orderBy('Username') // get the min of the 'age' attribute
useCollect(useRepo1).min('age') // get the max of the 'age' attribute
useCollect(useRepo1).max('age') // get the sum of the 'age' attribute
useCollect(useRepo1).sum('age') // sort by 'age' attribute
useCollect(useRepo1).sortBy('age') // get all values in 'age' attribute
useCollect(useRepo1).pluck('age') // get all primary keys
useCollect(useRepo1).keys()

In Myfriends.vue component, Let's use the all() method to fetch all the records in the database and display updates in our application interface. Add the following code to Myfriends.vue script:

// src/components/Myfriends.vue
// . . .
export default {
  computed: {
    friend_list: () => useRepo1.all(),
  },
  // . . .

Next, we can display the records by adding the following code to the Myfriends.vue template.

<!-- . . . -->
<div class="container">
  <h2>My Friend List</h2>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Username</th>
        <th>Fullname</th>
        <th>Age</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="friend in friend_list">
        <td>{{ friend.Username }}</td>
        <td>{{ friend.Fullname }}</td>
        <td>{{ friend.Age }}</td>
        <td>{{ friend.Email }}</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- . . . -->

Refresh the application in your browser and have the following output.

Deleting Data from the database

Pina ORM provides two methods of deleting records from the database. The first method uses the delete() query, which is used to delete records with a specified condition. The delete() query can be used as follows.

const useRepo1 = useRepo(Friend, pinia)
useRepo1.where('Username', 'John').delete()

The above code will delete the record where the username is john from the table.

The second method uses the destroy() query to delete records from the database; it accepts the record's ID as a parameter. The destroy() query can be used as follows.

const useRepo1 = useRepo(Friend, pinia)
useRepo1.destroy(1) // delete record id 1
useRepo1.destroy([1,4,5]) // delete record id 2,4,5

Pinia ORM Tables Relationships

Pinia ORM provides a unique method for handling connections between tables in a database, enabling the definition of various relationship types within the database model classes, including one-to-one, one-to-many, and many-to-many.

One To One Relationship

Pinia ORM one-to-one relationship is a type of relationship where each record in a table is associated with one record in another table. This type of relationship is often used when there is a unique constraint or a need to isolate specific data in a separate table.
For example, a Users table might have a one-to-one relationship with a "Profile" table, where each user has a unique profile. Let's create two tables (Users and Profile) to demonstrate how a one-to-one relationship works.
Inside the store folder, create a User.js file and add the following code.

// User Model
import { Model } from "pinia-orm";
import Profile from "./Profile";
export default class User extends Model {
  // entity is a required property for all models.
  static entity = "users";
  static fields() {
    return {
      id: this.uid(2),
      name: this.attr(""),
      email: this.string(""),
      profile: this.hasOne(Profile, "userID"),
    };
  }
}

In the code above, the one-to-one relationship is defined by passing the Profile class as the first argument and "userID" as the foreign key to the 'hasOne' method, creating a unique association between the User and Profile tables, linking the "userID" field in the Profile table to the "id" field in the User table.
Next, let’s Create the Profile table. Inside the stores folder, create a Profile.js file and add the following code.

// Profile Model  
import { Model } from "pinia-orm";
export default class Profile extends Model {
    // entity is a required property for all models.
    static entity = "profiles";
    static fields() {
        return {
            id: this.uid(),
            userID: this.attr(""),
            bio: this.attr(""),
            job: this.string(""),
        };
    }
}

Once you register the two databases in your component, you can use the following code to access the one-to-one relationship record.

const userinfo = User.query().with('profile').first()

One To Many

A one-to-many relationship in an ORM relationship in which a single record in one table is associated with multiple records in another. This type of relationship is often used to model a parent-child relationship, where a single parent can have multiple children.

In our previous example, let's assume a user can have more than one profile. We can use a one-to-many relationship to associate the user with the profile records by replacing this.hasOne with this.hasMany, as shown below.

static fields() {
  return {
    id: this.uid(2),
    name: this.attr(""),
    email: this.string(""),
    profile: this.hasMany(Profile, "userID"),
    };
}

Conclusion

Pinia ORM is an essential tool for managing state in Vue applications. It provides a flexible way to handle state, allowing developers to work with data using database models and relationship patterns.

In this tutorial, we learnt what Pinia ORM is, how to configure it, and how to use it in Vue Applications. You can learn more about Pinia ORM from their official documentation.

https://blog.openreplay.com/managing-state-in-vue-with-pinia-orm/

Integrating Google Maps into Vue Applications

popoola Temitope — Sat, 21 Oct 2023 00:50:27 +0000

This article was originally published on OpenReplay blog.

Google Maps is a powerful tool for displaying interactive maps and location-based services on the web. Imagine you're creating a travel app that helps users plan trips. With Google Maps, you can display different routes, points of interest, and allow users to zoom and click on markers for a better experience.
Integrating Google Maps features into a Vue.js application can enhance the user experience and provide valuable geospatial features. In this tutorial, we will explore the process of integrating Google Maps into a Vue application using the popular Vue-google-maps library.

Prerequisites

Before we fully dive into the tutorial, we should have the following requirements to follow along and complete the tutorial.

Node.js and npm installed on your system.
You will need a Google Maps account.
You should be familiar with Vue. ## Getting Google Map API Key I assume you already have a Google Maps account. If you don't have one yet, you can create a new account by following these steps.
Login to the Google Cloud Console.
Click on the Select a Project drop-down menu and choose New Project. Name your project and click Create.
Navigate to APIs & Services → Dashboard from the Cloud Console's navigation menu.
Click the + ENABLE APIS AND SERVICES button.
Search for Maps JavaScript API and select it.
Click on the Enable button to activate the API for your project.
Go back to the navigation menu and choose APIs & Services → Credentials.
Click Create Credentials and select API key.
Copy the generated API key and ensure its security. You'll need to add this key to your Vue.js application to access Google Maps services. ## Vue-google-maps Installation Vue-google-maps is a popular integration for Vue.js applications that enables seamless incorporation of Google Maps functionality. It offers a collection of Vue components that simplify the process of implementing interactive maps, markers, and geolocation-based features within Vue applications. Before installing vue-google-maps, let's create a new Vue project. To do so, open your terminal and execute the following command:

npm create vue@latest

Follow the instructions provided by the prompt to create a new Vue project, as shown in the image below.

Next, we will install the vue-google-maps package into the application by running the following command:

npm install -S @fawmi/vue-google-maps

Vue-google-maps Configuration

After installing the library, you need to configure it to use your Google Maps API key. In your Vue project, open the main.js file and add the following code:

import { createApp } from "vue";
import VueGoogleMaps from "@fawmi/vue-google-maps";
import App from "./App.vue";
import "./assets/main.css";
const app = createApp(App);
app.use(VueGoogleMaps, {
    load: {
        key: 'YOUR_GOOGLE_MAPS_API_KEY,
    },
  })
  .mount("#app");

Replace YOUR_GOOGLE_MAPS_API_KEY with the API key you obtained earlier and save the code.
At this stage, if you reload the application, an import issue will occur. To resolve this error, add the following configuration to your vite.config.js file.

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  optimizeDeps: {
    include: ["@fawmi/vue-google-maps", "fast-deep-equal"],
  },
});

Displaying a map View

Now that the library is set up, let's create a component to display the Google Map. In your Vue project, open the App.vue file. In the App.vue file, we use the GMapMap component to display a map in our application. To achieve this, replace the existing App.vue code with the following code.

<template>
  <GMapMap
    :center="center"
    :zoom="7"
    map-type-id="terrain"
    style="width: 1000px; height: 800px"
  >
  </GMapMap>
</template>
<script>
  export default {
    name: "App",
    data() {
      return {
        center: { lat: 51.093048, lng: 6.84212 },
      };
    },
  };
</script>

From the above code we have:

The GMapMap component is used to display the Google Map within the template section.
The :center prop is used to set the center position of the map. In this case, it's set to latitude 51.093048 and longitude 6.842120.
The :zoom prop sets the initial zoom level of the map to 7.
The map-type-id prop defines the type of map to display. Here, terrain type is used.

Now, start the application using npm run dev. You should see the map displayed in the application, as shown in the image below.

Getting current user location - Map Marker

We can also obtain the current location of a user using the Geolocation API, which will prompt the user to allow the application to access their location. Then, we can add a marker to the user's location on the map to indicate their position. To achieve this, replace the code in app.vue with the following code.

<template>
  <GMapMap
    :center="center"
    :zoom="zoom"
    map-type-id="terrain"
    style="width: 1000px; height: 800px"
  >
    <GMapMarker
      :key="marker.id"
      v-for="marker in markers"
      :position="marker.position"
    />
  </GMapMap>
</template>
<script>
  export default {
    name: "App",
    data() {
      return {
        center: { lat: 6.465422, lng: 3.406448 },
        zoom: 7,
        markers: [
          {
            id: "user-marker",
            position: {
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            },
          },
        ],
      };
    },
    methods: {
      geolocate: function () {
        navigator.geolocation.getCurrentPosition((position) => {
          this.center = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          this.markers.push({
            id: "user-marker",
            position: {
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            },
          });
        });
      },
    },
    mounted() {
      this.geolocate();
    },
  };
</script>

In the code above, we wrap the GMapMarker within the GMapMap component, which contains all the props used for the marker indicator. Then, we utilize getCurrentPosition from the Geolocation API to retrieve the user's location coordinates and update them within the GMapMarker component.

Refresh the application; this will add a map marker to the user's current location, as shown in the image below:

Using Location Search

Now, let's implement a location search feature that will allow users to search for places and display them on the map. Before we can add location search features into our vue application, we need to first place libraries to vite.config.js. Using the code below:

//...
load: {
  key: 'YOUR_GOOGLE_MAPS_API_KEY',
  libraries: "places"
},
//...

Next, we will use the GMapAutocomplete component to add location searches to the vue application. To achieve this update app.vue code with the following code.

<template>
  <div>
    <GMapAutocomplete
      placeholder="This is a placeholder"
      @place_changed="setPlace"
      style="font-size: large"
    ></GMapAutocomplete>
    <GMapMap
      :center="mapCenter"
      :zoom="mapZoom"
      style="width: 1000px; height: 700px"
    >
      <GMapMarker :position="markerPosition" />
    </GMapMap>
  </div>
</template>
<script>
  export default {
    name: "App",
    data() {
      return {
        mapCenter: { lat: 6.465422, lng: 3.406448 }, // Initial center
        mapZoom: 7, // Initial zoom level
        markerPosition: null, // Marker position will be set based on searched location
      };
    },
    methods: {
      setPlace(place) {
        this.markerPosition = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng(),
        };
        this.mapCenter = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng(),
        };
      },
    },
  };
</script>

In the code above, we added an input field where users can easily search for places and then display the location on the map by indicating the selected place with a map marker. The code will produce the result below, as shown in the image.

Conclusion

Now you have successfully integrated Google Maps into your Vue.js application using the Vue-google-maps library. You now have a map view with location markers and the ability to search for locations. Feel free to further enhance your application with additional features such as custom markers, directions, or geolocation-based services.

Remember to adhere to Google Maps API usage policies and consider implementing additional security measures when utilizing location-based services in your application. Happy mapping!

https://blog.openreplay.com/integrating-google-maps-into-vue-applications/

How to Run Concurrent Applications With Docker Compose

popoola Temitope — Thu, 22 Jun 2023 06:15:54 +0000

In modern software development, deploying backend and frontend components simultaneously is necessary for seamless application delivery. Over the years, running both backend and frontend software involved using different services which can sometimes reduce software productivity and maintenance.

In this tutorial, you will learn how to run concurrent backed and frontend applications using Docker Compose. By reading this tutorial, I assume you have Docker installed on your computer and have basic knowledge of Docker.

What is Docker Compose?

Docker Compose is a tool used for defining and managing multi-container Docker applications. It lets developers describe a complex application setup consisting of multiple services, networks, and volumes in a simple declarative YAML (Yet Another Markup Language) file.
With Docker Compose, you can define the services your application needs, specify how they should be connected, and configure their individual settings. These services can be built from Docker images or utilize pre-existing images from public or private registries.

Setting up the applications

To demonstrate how we can run applications concurrently using Docker Compose, we will clone a GitHub project that contains a backend application built with Node.js and a frontend application built with Vue.js.
To clone the application, open your terminal and run the following commands.

git clone https://github.com/popoolatopzy/tutorial

After cloning the application, you will notice that the tutorial folder is divided into two parts: the backend, which is the Node application, and the frontend, which is the Vue application.
To install all the necessary dependence for the application on the terminal, navigate to both the backend and frontend folder and run the following command respectively:

cd tutorial
npm install

After installing all the needed dependencies for the application, open the project folder in your code editor.

Backend Dockerfile configuration

A Dockerfile contains a specific set of instructions on how to build a Docker image. It defines the environment, dependencies, and configuration of a Docker container.

In your application working directory, you must set the application environment, install necessary dependencies, and configure the application. Inside the backend folder, create Dockerfile with no extension and add the following code to the file:

FROM node:alpine
WORKDIR /backend/
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "node", "app.js" ]

The Dockerfile above sets up a Node.js environment based on the Alpine Linux distribution, installs dependencies specified in package.json using npm install, copies the application code and files to the working directory, exposes port 3000, and executes the app.js file using the node command when the container is launched.
You can test that the above docker code is correct by running the following docker build command.

docker build -t backend .

After building the docker image, run the docker image using the command below and the backend application will be up and running.

docker run -p 3000:3000 backend

Frontend Dockerfile configuration

To run the application using Docker, you also need to create a Dockerfile in the frontend folder of your application. To do this, navigate to the src folder inside the frontend folder, create a Dockerfile file (with no extension), and add the following code.

# Use an official Node.js runtime as the base image
FROM node:alpine
RUN npm install -g http-server
# Set the working directory in the container
WORKDIR /frontend
COPY package*.json ./
# Install the application dependencies
RUN npm install
# Copy the entire application to the container
COPY . .
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

The Dockerfile above sets up a containerized environment for a frontend application(Vue), installs dependencies, builds the application, exposes port 8080, and runs an HTTP server to serve the built application from the dist directory.

Run the following docker build command to test that the above docker code is correct.

docker build -t frontend .

Next, run the command below to start the docker image, and the application will be up and running.
Creating docker-compose.yml File
So far, you created a Docker image for both the backend and frontend applications and then ran the Docker run command to start the applications, respectively. Managing more than one docker container can be hard sometimes. With Docker Compose, you can easily configure and manage multi-container with that stress using docker-compose.yml.

A docker-compose.yml file is a YAML (YAML Ain't Markup Language) configuration file used by Docker Compose, a tool for defining and running multi-container applications.
In the application root directory, create a docker-compose.yml file and add the following configuration.

version: "3"
services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - 3000:3000
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - 8080:8080

The Docker Compose configuration above represents a multi-container application comprising a backend service and a frontend service. Let's break it down:

version: "3" specifies the version of the Docker Compose file format in use.
services: defines the services within the application. In this case, there are two services: backend and frontend.
build: specifies the build configuration for each service.
context: ./backend and ./frontend set the build context to the respective directories containing the source code and Dockerfile for building each service.
dockerfile: Dockerfile specifies the name of the Dockerfile for building each service.
ports: configures port mappings for each service, allowing access to specified ports on the container from the host machine.

Running the application

Once you are done with the docker-compose.yml configuration, the you all set to running the to application using docker compose. You need to run the build command using the command below.

docker compose build

After build the docker image using compose, then you need to start the two application containers using the command below:
docker compose up
Now you show have your two servers up and running.

Conclusion

In this tutorial, you learned how to develop multiple concurrently running services. You were able to run both a Node.js application and a Vue.js application concurrently using Docker Compose.

Docker Compose is a powerful tool that enables developers to run multiple applications concurrently. By defining the services and their dependencies in a YAML file, developers can easily spin up and manage their applications in a containerized environment. This approach provides numerous benefits, including simplified development workflows, efficient resource utilization, and consistent deployment across different environments.

Getting started with Symfony framework Introduction

popoola Temitope — Thu, 21 Oct 2021 16:49:07 +0000

Symfony is used to speed up the creation and maintenance of web applications and to replace repetition of coding tasks. Symfony is a reusable set of standalone, decoupled and cohesive PHP components that solve common web development problems.
Symfony is very easy to install and use for php developers.

Advantage of using Symfony

Time-saving capabilities
Code reusable and easier to maintain
Error logging 4.Easy to Use ## Symfony installation >Before you can install Symfony you must have the following requirement:
A web server e.g XAMPP, WAMP, or any other server
Compatibility: PHP 5.4 or later version.
Composer (we’ll use a composer for all our installation or else state otherwise) ##Installation using Composer For you to install Symfony using composer installation, you must have composer installed on your device. The command below is used to create a Symfony project using the composer.

composer create-project symfony/website-skeleton application_name

Running Symfony Application

Symfony provides a local web server for running Symfony applications. to run your application move to your project folder.
The following command is used to create a local web server and for running your application.

cd HelloWorld 
php bin/console server:run

Now Open your browser and request the URL http://localhost:8000/. you’ll see a welcome page if your Symfony installation is completed.

When you have finished testing your application, you need to press Ctrl+C from your terminal to stop the local web server.

N.T local web server works with other PHP applications.

Getting start with Symfony

### Creating the first HTML page
Creating an HTML page is base on a two-step process namely:

Create a route: In config/routes.yaml, the route defines the URL to your
page (path) and what controller to call. The route is the URL to the page you want to create(e.g. /contact) and points to a controller;
Create a controller: the controller is the PHP function you write that makes up the page. A controller can be used to process HTTP requests.

Let print Hello world, this is my first page on your HTML page.

To create a page welcome/page that will print out Hello world this is my first page
First and foremost we have to create a controller class and a controller method inside it.


namespace App\Controller; 

use Symfony\Component\HttpFoundation\Response;

class first_page
{
    public function hello(): Response
    {
        return new Response(
            '<html><body><b>Hello world, this is my first page</b></body></html>'
        );
    }
}

We can now associate the public URL (e.g. /contact) with the controller function hello() that we created above under the config/routes.yaml file
Open config/routes.yaml file and edit it as shown below

 # config/routes.yaml

# the "first_website" route name is not important yet
first_website:
    path: /contact
    controller: App\Controller\first_page::hello

Save your project and start your server then go to http://localhost:8000/contact on your browser. You should see Hello world, this is my first page on your browser.

Twig - Rendering a Template

Sometimes, it looks as odds to render a full static HTML code in the controller directly, we can use Twig to render HTML responses from a template. Symfony comes with Twig: a templating language that’s minimal, powerful templating language and is easy to use.

Twig package installation
Let install the twig package using the following command

   composer require twig

Using Twig for application
Make sure that first_page extends Symfony’s base

Symfony\Bundle\FrameworkBundle\Controller\AbstractController class:

// src/Controller/LuckyController.php
namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
// ...

class frist_page extends AbstractController
{
    /**
     * @Route("/contact")
     */
    public function hello(): Response
    {
     $greetings = “Hello world, this is my first page”;

        return $this->render('static_template.html.twig', [
            greetings=> $greetings,
        ]);

    }
}

render() method is used to render the template, pass in the variable that you want to use( in our project we’re using greetings) so that we can use it in twig.

Template files are store in the templates/ directory, which was created for you automatically when you installed Twig. Create a new templates/contact directory with a new contact.html.twig file inside:

{# templates/lucky/number.html.twig #}
<html><body><b>{{ greetings}}</b></body></html>

The {{ greetings}} syntax is used to print variables passed from the controller, in Twig. Refresh your browser you’ll Hello world, this is my first page on your browser.

Symfony form
Symfony provides a package called Symfony Flex for handling HTML form processing. Which makes it easy for validating submitted data, mapping the form data into objects, and a lot more.
Symfony flex installation
Run the following command to install the package:

    composer require symfony/form

Creating forms in the controller
open Form/Type/TaskType.php from your editor. For you to add input fields along with their attributes.

// src/Form/Type/TaskType.php
namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;

class TaskType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('task', TextType::class)
            ->add('dueDate', DateType::class)
            ->add('save', SubmitType::class)
        ;
    }
}

From the above code, $build is used to add input or field to a form along with its attribute.

$builder->add(name,textType::class) : name represent the name of the input field and textType represent the format of the input to accept e.g text, date, email, e.t.c

Rendering Forms
Now we have created the form, let display the form in the browser.

// src/Controller/TaskController.php
namespace App\Controller;

use App\Entity\Task;
use App\Form\Type\TaskType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

class TaskController extends AbstractController
{
    public function new(Request $request): Response
    {
        $task = new Task();
        // ...

        $form = $this->createForm(TaskType::class, $task);

        return $this->renderForm('task/new.html.twig', [
            'form' => $form,
        ]);
    }
}

Now go to your tamplate file and render the form as show below:

{# templates/task/new.html.twig #}
{{ form(form) }}

The form() function is a form helper function. it renders all fields and the <form> start and end tags. By default, the form method is POST and the target URL is the same that displayed the form.

Processing form
Processing form mean to get submitted form data at the backend and manipulating the data.

// src/Controller/TaskController.php

// ...
use Symfony\Component\HttpFoundation\Request;

class TaskController extends AbstractController
{
    public function new(Request $request): Response
    {
        // just setup a fresh $task object (remove the example data)
        $task = new Task();

        $form = $this->createForm(TaskType::class, $task);

        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
            // $form->getData() holds the submitted values
            // but, the original `$task` variable has also been updated
            $task = $form->getData();

            // ... perform some action, such as saving the task to the database
            // for example, if Task is a Doctrine entity, save it!
            // $entityManager = $this->getDoctrine()->getManager();
            // $entityManager->persist($task);
            // $entityManager->flush();

            return $this->redirectToRoute('task_success');
        }

        return $this->renderForm('task/new.html.twig', [
            'form' => $form,
        ]);
    }
}

Useful Resources
https://symfony.com/doc/current/index.html
https://www.google.com/search?q=symfony
https://www.tutorialspoint.com/symfony/
https://en.wikipedia.org/wiki/Symfony

Introduction to cURL with php

popoola Temitope — Sat, 09 Oct 2021 21:44:00 +0000

Client URL (cURL) is a PHP library for transferring data using various network protocols. cURL allows data to be transfer over HTTP using either the GET/POST method.

In this article we'll discus briefly on cURL under the following:

Reason for cURL
Implementation of cURL
Sample codes - using POST, GET method and file uploading
some cURL functions

cURL is supported with PHP version 4 and above.
file can be upload using cURL.

Some of the reasons you might want to use cURL compared to other options like file_get_contents() includes:

cURL is a good way to communicate with third-party API either to download resources or to fetch information from an external website.
cURL is a good library for developing REST API.
cURL is secure and easy to use.
cURL is use instead of file_get_contents because it support POST method.

Getting started with cURL

First you will need to initialize a new curl session using the curl_init() function.

You should note this function must come first before all other curl related functions.

Afterwards, we use curl_setopt() to define other various options like setting the request type, adding request data, etc. for our curl request.

most of the cURL request settings are done using curl_setopt() function.
This function takes three parameters - curl_setopt($curl, CURLOPT_*,Value) where:

$curl - the initializeed curl session variable

CURLOPT_* - the option to set e.g CURLOPT_POST

Value - this is the value to set for a specified CURLOPT_* option.

And, on sending our request, the following options are required:

a. curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE) - setting the CURLOPT_RETURNTRANSFER option to TRUE will prevent the response to be displayed directly on the screen.

b. curl_setopt($curl, CURLOPT_URL, $url) - use CURLOPT_URL option to set the request URL to thewebsite.com

c. curl_setopt($curl, CURLOPT_POST, TRUE) - the CURLOPT_POST option to TRUE to set the request method to HTTP POST

d. curl_setopt($curl, CURLOPT_POSTFIELDS, $fields_string_array) - use CURLOPT_POSTFIELDS option to set the POST data to submit along with the request.

e. curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type:application/json') - this inform the API server that we are sending JSON data.

use curl_exec($curl) - to execute a request or perform a cURL session.
use curl_close($curl) - to close the curl session.

curl in action

The code below is a sample of cURL POST method request to be submit, along with required datas.

$curl = curl_init();
$post_method = array( "userName" => "example1",
"email" => "email@example.com",
"password" => "password");

$url = 'https://www.thewebsite.com';
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $post_method);
curl_setopt($curl, CURLOPT_HEADER, false);

$Response = curl_exec($curl);

curl_close($curl);

Upload file with cURL

To upload a file with cURL we need to use curl_file_create to create the CURLFile object, we'll set CURLOPT_HTTPHEADER to multipart/form-data

<?php
$url = '{POST_REST_ENDPOINT}';

$curl = curl_init();

if (function_exists('curl_file_create')) {
  $fileAttachment = curl_file_create('/file/path/');
} else {
  $fileAttachment = '@' . realpath('/file/path/');
}

$fields = array(
    'username' => 'Value',
    'password' => 'Value',
    'uploaded_file' => $fileAttachment
);

curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, TRUE);
curl_setopt($curl, CURLOPT_POSTFIELDS, $fields);
curl_setopt($curl, CURLOPT_RETURNTRANSFER,1);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type:multipart/form-data')
$response = curl_exec($curl);

curl_close($curl);
?>

List of some cURL functions.

curl_escape — it encode a given URL string
curl_unescape — it decodes a given URL encoded string
curl_errno — it return the last error number, when error is encounter
curl_error — it return a string description containing the last error for the current session
curl_getinfo — Get information about a specific transfer
curl_setopt_array — for Setting multiple options for a cURL transfer(in array format).
curl_pause — it Pause and unpause a connection
curl_reset — it Reset all options of a cURL session handle
curl_version — Gets cURL version information

Node.js with MySQL database.

popoola Temitope — Mon, 09 Aug 2021 21:13:20 +0000

Connecting node.js project with MySQL database is easy, follow the following steps to connect to the the database

By reading this article I believe you have installed nodee Js on your system and familiar with it.

Step1

Open your code editor.

Step2

Create a new project
Open your command prompt or terminal and enter

 mkdir project_name
 cd project_name

Step3

Create project file.
enter

 npm init -y

into the command prompt or terminal.

Step4

To be able to connect to mysql database you need to install MySQL module into your project.

To do this is very simple, open your CMD or terminal and enter

 npm install mysql

this command will install the module into your project.

Step5

Now we can open connection From our project code to mysql database
add the code below to your app.js code to open a connection.


const mysql = require('mysql');

// Creating a mysql connection
const conn = mysql.createConnection({
   host: "localhost",
   user: "db_username",
   password: "db_password",
   database: "db_name"
});

Step6

Let create a simple database and table

conn.connect((err)=>{
   if (err) throw err;
      console.log("Database connected successful");
   var sql = "CREATE TABLE books (book_name VARCHAR(255), book_description VARCHAR(255))";
   con.query(sql,(err, result)=> {
      if (err) throw err;
         console.log("Table created");
   });
});

You can leave a comment...
Thanks❤️

Webrtc libraries for programmers.

popoola Temitope — Thu, 05 Aug 2021 08:34:09 +0000

Webrtc is a free and open-source project providing web browsers and mobile applications with real-time communication (RTC) via simple application programming interfaces (APIs).

With WebRTC, you can add real-time communication capabilities to your application that works on top of an open standard. It supports video, voice, and generic data to be sent between peers, allowing developers to build powerful voice- and video-communication solutions.

Webrtc Libraries

simpleRTC

Empowering developers of all skill levels to build advanced realtime apps.

RTCMultiConnection

WebRTC JavaScript library for peer-to-peer applications (screen sharing, audio/video conferencing, file sharing, media streaming etc.)

crocodileRTC

The Crocodile RTC APIs allow developers to easily integrate web communications into their website or web app and manage users.

lynckia/licode

An Open Source WebRTC Communications Platform.

With Licode you can host your own WebRTC conference provider and build applications on top of it with easy to use APIs: client-side and server-side.

rtc.io

rtc.io is a collection of node.js modules that simplify WebRTC development.

webrtc.io

WebRTC (Web Real-Time Communication) is a free, open-source project that provides web browsers and mobile applications with real-time communication (RTC) via simple application programming interfaces (APIs).

easyRTC

EasyRTC is a full-stack open source WebRTC toolkit suitable for building highly secure, WebRTC applications

Best 10 JavaScript libraries to know.

popoola Temitope — Tue, 03 Aug 2021 08:14:47 +0000

1 fullpage.js

fullPage is an open-source library that allow you to Create fullscreen pages fast and full-screen scrolling websites that makes your website more responsive

It's easy to use and has many options to customize, so it's no surprise it is used by thousands of developers and has over 30k stars on GitHub.

2 Anime.js

Anime.js is one of the best. It’s easy to use, has a small and simple API,and offers everything you could want from a modern animation engine. The library has a small file size and supports all modern browsers, including IE/Edge 11+.

It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Bideo.js

Bideo.js allow you to add full-screen videos into your site’s background page.
Easy to implement using CSS/HTML/JavaScript
Algolia Places

Algolia Places is a JavaScript library that provides an easy and distributed way of using address auto-completion on your site. It’s a blazingly fast and wonderfully accurate tool that can help increase your site user experience. Algolia Places leverages the impressive open-source database of OpenStreetMap to cover worldwide places.

For example, you can use it to boost your product page conversions.

Leaflet

Leaflet is one of the best JavaScript libraries that you can use to include interactive maps into your site. It is open-source and mobile-friendly, weighing around 39kb. The MapPress Maps for WordPress plugin uses Leaflet to power its interactive maps.

Moment.js

Moment.js helps you manage time and date effectively when working with different time zones, API calls, local languages, etc.

You can streamline dates and times by validating, parsing, formatting, or manipulating them.

Cron job on a server

popoola Temitope — Tue, 08 Jun 2021 00:19:17 +0000

What is a cron job?
A cron job is use to execute a particular script (code) on a scheduled time repeatedly.

What is cron job is use for?
Email marketing
Delete file
to send newsletter

How to setup cron job on a server

Login to the dashboard
Locate cron job and click on it
Then fill the for under add cron job

Select your command settings
This where you select may be the script will be execute once per day, once per week ,etc
Then select the minute,hour,day, monthly and weekend in which the cron job will be execute.

minute	0-59	The exact minute that the command sequence executes
hour	0-23	The hour of the day that the command sequence executes
day	1-31	The day of the month that the command sequence executes
month	1-12	The day of the month that the command sequence executes
weekday	0-6	The day of the week that the command sequence executes (Sunday = 0, Monday = 1, Tuesday = 2, and so forth)
command	special	The complete sequence of commands to execute. The command string must conform to Bourne shell syntax. Commands, executables (such as scripts), or combinations are acceptable.

command


cd/home/user /public_html/admin; php -q auto.php
This command will open the folder admin on n the server,
Then php represent the format of the script 
Follow by -q and then the file you want to execute