#2 SSO

🔐 Advanced SSO using OAuth 2.0 with PHP

📘 What is OAuth 2.0?

OAuth 2.0 is a secure authorization framework that allows users to login using external providers like Google without sharing passwords.

⚙️ OAuth Flow

User → Redirect to Provider → Login → Authorization Code → Token → User Info → Login

📦 Install Google Client Library

composer require google/apiclient

🔑 Step 1: Create OAuth Client

• Go to Google Cloud Console
• Create project
• Enable OAuth
• Get Client ID & Secret

💻 Step 2: Login Redirect Code

<?php
require 'vendor/autoload.php';
$client = new Google_Client();
$client->setClientId('YOUR_CLIENT_ID');
$client->setClientSecret('YOUR_CLIENT_SECRET');
$client->setRedirectUri('http://localhost/callback.php');
$client->addScope("email");
$client->addScope("profile");

echo "<a href='".$client->createAuthUrl()."'>Login with Google</a>";

🔄 Step 3: Callback Handling

<?php
require 'vendor/autoload.php';
$client = new Google_Client();
$client->setClientId('YOUR_CLIENT_ID');
$client->setClientSecret('YOUR_CLIENT_SECRET');
$client->setRedirectUri('http://localhost/callback.php');

$token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
$client->setAccessToken($token);

$oauth = new Google_Service_Oauth2($client);
$user = $oauth->userinfo->get();

echo "Welcome ".$user->email;

🔗 Step 4: WordPress Integration

After login, pass user email to WordPress and auto-login using custom plugin.

🔒 Security Features

• Token-based authentication
• No password sharing
• Secure redirect
• Access control via scopes

🎓 MCQs

• OAuth is used for authorization
• Access token is temporary
• Client ID identifies application

#1 SSO

🔐 WordPress SSO Plugin using PHP (JWT)

📦 Plugin Structure

wp-content/plugins/simple-sso/
├── simple-sso.php
├── vendor/

🧾 Plugin Code

<?php
/* Plugin Name: Simple SSO Login */
require_once __DIR__ . '/vendor/autoload.php';
use Firebase\JWT\JWT;
use Firebase\JWT\Key;
add_action('init','simple_sso_login');
function simple_sso_login(){
 if(!isset($_GET['sso_token'])) return;
 $token = $_GET['sso_token'];
 $secret_key = "my_super_secret_key";
 try{
  $decoded = JWT::decode($token,new Key($secret_key,'HS256'));
  $email = $decoded->email;
  $user = get_user_by('email',$email);
  if(!$user){
   $user_id = wp_create_user($email,wp_generate_password(),$email);
   $user = get_user_by('id',$user_id);
  }
  wp_set_current_user($user->ID);
  wp_set_auth_cookie($user->ID);
  wp_redirect(home_url());
  exit;
 }catch(Exception $e){
  wp_die('Invalid token');
 }
}

📥 Install JWT Library

composer require firebase/php-jwt

🔑 Token Generator

<?php
use Firebase\JWT\JWT;
$secret_key = "my_super_secret_key";
$payload = [
 "email" => "student@gmail.com",
 "iat" => time(),
 "exp" => time()+300
];
$jwt = JWT::encode($payload,$secret_key,'HS256');
header("Location: https://yourwpsite.com/?sso_token=".$jwt);
exit;

🔄 Flow

User Login → Generate Token → Redirect → WordPress Verify → Login

🔒 Security Tips

• Use HTTPS
• Short expiry (5 min)
• Protect secret key

🎓 MCQs

• JWT stands for JSON Web Token
• SSO means one login multiple systems

#0 SSO

🔐 Single Sign-On (SSO) using PHP

📘 What is SSO?

Single Sign-On (SSO) allows users to login once and access multiple systems without logging again.

⚙️ How SSO Works

• User logs into main system
• JWT token is generated
• User redirected to another system
• Token verified
• User logged in automatically

📦 Install JWT Library

composer require firebase/php-jwt

🔑 Token Generation Code

<?php
use Firebase\JWT\JWT;
$payload = [
 "email" => "user@gmail.com",
 "iat" => time(),
 "exp" => time()+300
];
$jwt = JWT::encode($payload, "secret", 'HS256');
header("Location: app2.php?token=".$jwt);
exit;

✅ Token Verification Code

<?php
use Firebase\JWT\JWT;
use Firebase\JWT\Key;
$decoded = JWT::decode($_GET['token'], new Key("secret", 'HS256'));
echo "Welcome ".$decoded->email;

🔄 Flow

Login → Token → Redirect → Verify → Access

🔒 Security Tips

• Use HTTPS
• Short token expiry
• Keep secret key safe

🎓 MCQs

• JWT stands for JSON Web Token
• SSO means single login multiple access
• Token expiry improves security

Builder.io Tutorials for IMMBiz Soft Solutions

Please 🚶🚶🚶🚶🚶thru and Practice: 

#1   https://learn-gemini2.blogspot.com/2025/05/bulderio-basics-tutorial.html

#2 https://learn-gemini2.blogspot.com/2025/05/builderio-landing-page-steps-prompt.html

#3 https://learn-gemini2.blogspot.com/2025/05/3-builderio-export-deploy.html

#4 https://learn-gemini2.blogspot.com/2025/05/4-login-and-authentication.html

#5 https://learn-gemini2.blogspot.com/2025/05/5-prompt-for-login-authetication.html

Note: Practice the above prompts in builder.io. These prompts for node.js. You may please give prompt for creating code in Angular in all the above prompts.

#5 Prompt for the Login & Authentication

 Absolutely — here are 2 separate Builder.io prompts for you to copy-paste and get things rolling!

---

✅ Prompt 1: Build Login + Signup UI Page in Builder.io

Create a modern, responsive authentication page with two tabs:
- First tab: "Login"
  - Fields: Email input, Password input
  - A blue "Submit" button
  - A link: "Forgot Password?"
  
- Second tab: "Sign Up"
  - Fields: Name input, Email input, Password input, Confirm Password input
  - A green "Submit" button
  - A link: "Already have an account? Login here"

- Use soft rounded corners, shadows, and a light color background
- Center the form vertically and horizontally
- Add spacing and padding between form fields
- Make the form mobile responsive

---

✅ Prompt 2: Add Form Action to Authenticate with PostgreSQL

For the Login form:
- On Submit: Make an HTTP POST request to "http://localhost:3000/login"
- Send form fields "email" and "password" as JSON payload

For the Sign Up form:
- On Submit: Make an HTTP POST request to "http://localhost:3000/signup"
- Send form fields "name", "email", and "password" as JSON payload

Display success message on successful response
Display error message if login fails

---

✅ Bonus: Add Success & Error Messages Prompt

Add dynamic text below the Submit button to show:
- "Login successful!" in green if API response is success
- "Invalid email or password" in red if API response is error

---

These prompts will guide Builder.io AI to:

• ✅ Build the Login/Signup UI

• ✅ Wire up API requests to your Node.js + PostgreSQL backend

• ✅ Show feedback messages to users

---

 👇

#4 Login and Authentication

 Absolutely! Let’s tackle this in two clear parts — first the Builder.io prompt for visually building the login/signup UI, and then the backend code to check credentials from PostgreSQL.

---

✅ Builder.io Prompt to Create Login Page

Use this prompt inside Builder.io’s AI builder or Design Assistant:

Create a modern responsive login page with:
- Two tabs or toggle: "Login" and "Sign Up"
- Inside "Login" tab: fields for Email and Password + a "Submit" button
- Inside "Sign Up" tab: fields for Name, Email, Password, Confirm Password + a "Submit" button
- Stylish form with rounded corners, light shadow, and soft colors
- Centered form in the page with spacing and padding
- Add "Forgot Password?" link below login form
- Add "Already have an account? Login here" link below signup form
- Make it mobile responsive

This will give you a visually appealing page quickly inside Builder.io 🎯.

---

✅ Backend: Authentication Code with PostgreSQL

Here’s a simple Node.js + Express + PostgreSQL code snippet to check login credentials.

1️⃣ Install Dependencies

npm init -y
npm install express pg bcrypt body-parser

2️⃣ Create server.js

const express = require('express');
const bodyParser = require('body-parser');
const { Pool } = require('pg');
const bcrypt = require('bcrypt');

const app = express();
app.use(bodyParser.json());

const pool = new Pool({
  user: 'your_db_user',
  host: 'localhost',
  database: 'your_db_name',
  password: 'your_db_password',
  port: 5432,
});

// Login Route
app.post('/login', async (req, res) => {
  const { email, password } = req.body;
  try {
    const result = await pool.query('SELECT * FROM users WHERE email = $1', [email]);
    if (result.rows.length === 0) {
      return res.status(400).json({ message: 'User not found' });
    }
    const user = result.rows[0];
    const valid = await bcrypt.compare(password, user.password);
    if (!valid) {
      return res.status(400).json({ message: 'Invalid password' });
    }
    res.json({ message: 'Login successful', user });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// Signup Route
app.post('/signup', async (req, res) => {
  const { name, email, password } = req.body;
  try {
    const hashedPassword = await bcrypt.hash(password, 10);
    await pool.query('INSERT INTO users (name, email, password) VALUES ($1, $2, $3)', 
      [name, email, hashedPassword]);
    res.json({ message: 'User registered successfully' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

---

✅ PostgreSQL Table Structure

Run this SQL to create your users table:

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100) UNIQUE NOT NULL,
  password VARCHAR(255) NOT NULL
);

---

✅ How to Connect Builder.io Form with Backend

1. In Builder.io, select the Login form → Click "Actions" → "On Submit".

2. Choose "Make HTTP Request" and point it to:

   POST http://localhost:3000/login
   

3. Map form fields (email, password) to the body payload.

4. Similarly, map the Sign Up form to POST http://localhost:3000/signup.

---

Would you also like me to generate this whole tutorial as a beautiful PDF (Login UI prompt + Node.js code + SQL + integration steps)?
Just say "Yes, make PDF" 👇.

#3 builder.io export & deploy

 Absolutely — I’ll guide you step by step on how to export and deploy your complete landing page from Builder.io. Think of this as your friendly "Builder.io Deployment Cheat Sheet" 📦🚀

---

✅ Step 1: Finish Designing in Builder.io

• Go to Builder.io Dashboard.

• Open your FitLife landing page project.

• Make sure you have:

  • Hero section

  • Features grid

  • Testimonial slider

  • Blog preview

  • Footer

• Click Preview to test responsiveness (toggle mobile/tablet/desktop views).

---

✅ Step 2: Publish the Page (Deploy on Builder.io’s Hosting)

1. Click "Publish" (top-right corner).

2. Choose:

   • Published to Builder Hosting ➡️ Instant deploy on builder.io subdomain.

   • Ex: https://yourproject.builder.io

⚡ Quickest way to deploy!

---

✅ Step 3: Export for Code Integration (React / Next.js / Angular / Vue)

If you want to deploy on your own website/app:

Option 1: Copy Embed Code

1. Click "Get Code" button at the top.

2. Select "Embed Code" option.

3. Copy the provided <iframe> code.

4. Paste it into your website's HTML page (like WordPress, Wix, or plain HTML).

Option 2: Export to Code Framework

1. In Builder.io, click on "Integrations".

2. Choose your framework:

   • Next.js

   • React

   • Angular

   • Vue

3. It will show SDK installation steps.
   Example (for Next.js):

   npm install @builder.io/react
   

4. Use BuilderComponent in your code:

   import { BuilderComponent, builder } from '@builder.io/react';
   
   builder.init('YOUR_PUBLIC_API_KEY');
   
   export default function Page({ content }) {
     return <BuilderComponent model="page" content={content} />;
   }
   

---

✅ Step 4: Deploy to Your Hosting (Netlify, Vercel, Firebase etc.)

If you exported code:

1. Push your code to GitHub.

2. Connect your repo to hosting:

   • Netlify

   • Vercel

   • Firebase Hosting

3. Click Deploy. Boom! 🚀

---

✅ Step 5: Optional — Use Builder.io CMS for Dynamic Content

• Go to Builder.io → Models.

• Create CMS models like Blog Posts, Testimonials.

• Bind your page components to dynamic data via Custom Fields.

• Now your FitLife landing page becomes dynamic 🔥

---

✅ Step 6: Test Everything

• Open your deployed page link.

• Test:

  • Responsiveness (mobile/tablet/desktop).

  • Blog posts loading dynamically.

  • Testimonials slider works.

  • All links in footer working.

---