Implementing SSO in React with GitHub OAuth2

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • oauth

  • import { useEffect, useState } from "react"; import "./App.css"; import Profile from "./components/profile/Profile"; function App() { // Extracting the 'code' parameter from the URL query string (used for authorization) const urlParams = new URLSearchParams(window.location.search); const code = urlParams.get("code"); // State to store the retrieved user data const [data, setData] = useState(null); // State to indicate if data is being fetched const [loading, setLoading] = useState(false); // Runs whenever the 'code' variable changes (likely on authorization flow) useEffect(() => { const token = localStorage.getItem("token"); if (token) { setLoading(true); // Set loading to true while fetching data fetch("https://api.github.com/user", { headers: { Authorization: token }, }) .then((res) => res.json()) // Parse the response as JSON .then((data) => { setData(data); // Update state with fetched user data setLoading(false); // Set loading to false when done fetching }); } else if (code) { // If no token but 'code' is available (GitHub OAuth flow) setLoading(true); // Set loading to true while fetching data fetch( `http://localhost:8589/oauth/redirect?code=${code}&state=YOUR_RANDOMLY_GENERATED_STATE` ) .then((res) => res.json()) // Parse the response as JSON .then((data) => { setData(data.userData); // Update state with user data from response localStorage.setItem( "token", `${data.tokenType} ${data.token}` ); // Store access token in local storage setLoading(false); // Set loading to false when done fetching }); } }, [code]); // Function to redirect the user to the GitHub OAuth authorization page function redirectToGitHub() { const client_id = "blah blah"; const redirect_uri = "http://localhost:5173/"; const scope = "read:user"; const authUrl = `https://github.com/login/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&scope=${scope}`; window.location.href = authUrl; } // Conditionally render content based on loading state and data availability if (loading) { return

    Loading...h4>; } if (data) { return ; } return ( <>

    Login to MyApph1> GitHub Logo Login with GitHub button> div> ); } export default App;

  • sso-react-with-github

    a react application using sso with github OAuth2

  • This is just a basic setup, there are other ways to do it. But it gives you the idea! The code for this is over at Github if you want to check it out.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • vite

    Next generation frontend tooling. It's fast!

  • Imagine a shiny new React app — that’s what we’ll build! We’ll use a cool tool called Vite to set it up.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • React TypeScript - Vite + React

    1 project | dev.to | 8 May 2024
  • I Disappear

    3 projects | dev.to | 6 May 2024
  • Setup React Typescript with Vite & ESLint

    1 project | dev.to | 25 Apr 2024
  • Use CSS Variables to style react components on demand

    1 project | dev.to | 16 Apr 2024
  • Ask HN: How do we include JavaScript scripts in a browser these days?

    1 project | news.ycombinator.com | 13 Apr 2024