• okta-react-firebase-serverless-example

  1 0 1.8 JavaScript

  React application with Okta authentication using Firebase functions deployed to Firebase

  

git clone --bare https://github.com/oktadev/okta-react-firebase-serverless-example.git cd okta-react-firebase-serverless-example npm ci

• functions-samples

  66 11,967 6.8 JavaScript

  Collection of sample apps showcasing popular use cases using Cloud Functions for Firebase

  

import React, { useState } from "react"; import { useOktaAuth } from "@okta/okta-react"; import { initializeApp } from "firebase/app"; import { getAuth, signInWithCustomToken, signOut } from "firebase/auth"; import { getFunctions, httpsCallable, connectFunctionsEmulator, } from "firebase/functions"; function Home() { const [reportCardData, setReportCardData] = useState(); const [selectedSemester, setSelectedSemester] = useState("Spring 2022"); const { oktaAuth, authState } = useOktaAuth(); const login = async () => oktaAuth.signInWithRedirect(); const logout = async () => { signOut(auth); oktaAuth.signOut("/"); }; const { REACT_APP_FIREBASE_APIKEY, REACT_APP_FIREBASE_AUTHDOMAIN, REACT_APP_FIREBASE_PROJECTID, REACT_APP_FIREBASE_STORAGEBUCKET, REACT_APP_FIREBASE_MESSAGINGSENDERID, REACT_APP_FIREBASE_APPID, REACT_APP_ENV, } = process.env; const firebaseConfig = { apiKey: REACT_APP_FIREBASE_APIKEY, authDomain: REACT_APP_FIREBASE_AUTHDOMAIN, projectId: REACT_APP_FIREBASE_PROJECTID, storageBucket: REACT_APP_FIREBASE_STORAGEBUCKET, messagingSenderId: REACT_APP_FIREBASE_MESSAGINGSENDERID, appId: REACT_APP_FIREBASE_APPID, }; const app = initializeApp(firebaseConfig); const functions = getFunctions(app); const auth = getAuth(); if (REACT_APP_ENV === "development") { connectFunctionsEmulator(functions, "localhost", 5001); } const getGrades = async () => { const getGradesCall = httpsCallable(functions, "getGrades"); const resp = await getGradesCall({ name: selectedSemester.split(" ")[0], year: selectedSemester.split(" ")[1], }); setReportCardData(resp.data); }; const exchangeOktaTokenForFirebaseToken = async () => { const exchangeToken = httpsCallable( functions, "exchangeOktaTokenForFirebaseToken" ); const resp = await exchangeToken({ accessToken: authState.accessToken.accessToken }); await signInWithCustomToken(auth, resp.data.firebaseToken); }; if (authState?.isAuthenticated) { exchangeOktaTokenForFirebaseToken(); } return (

• {auth?.currentUser && ( Logout button> )} {!auth?.currentUser && ( Login button> )} li> ul> nav> {!auth?.currentUser && (

  In order to use this application you must be logged into your Okta account p>

  Login button> p> div> )} {auth?.currentUser && (

  Please select a semester to get your report card h1>

  { setSelectedSemester(e.target.value); }} > Fall 2021option> Spring 2021option> Fall 2022option> Spring 2022option> select> div> Get Grades button> div> div> {reportCardData && ( <> Name: b> {reportCardData.name} p> School: b> {reportCardData.school} p> Semester: b> {reportCardData.semester} -{" "} {reportCardData.year} p> Course th> Score th> Letter Grade th> tr> thead> {reportCardData.grades.map((grade, i) => { return ( {grade.course}td> {grade.score}td> {grade.letterGrade}td> tr> ); })} tbody> table> )} div> )} A Small demo using Oktaa> to Secure an{" "} Firebase hosted application{" "} a>{" "} with a serverless{" "} functiona> p> By Nik Fishera> p> footer> main> div> ); } export default Home;

• SurveyJS

  surveyjs.io sponsored

  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.

  

• quickstart-android

  335 8,720 8.0 Java

  Firebase Quickstart Samples for Android

  

import React, { useState } from "react"; import { useOktaAuth } from "@okta/okta-react"; import { initializeApp } from "firebase/app"; import { getAuth, signInWithCustomToken, signOut } from "firebase/auth"; import { getFunctions, httpsCallable, connectFunctionsEmulator, } from "firebase/functions"; function Home() { const [reportCardData, setReportCardData] = useState(); const [selectedSemester, setSelectedSemester] = useState("Spring 2022"); const { oktaAuth, authState } = useOktaAuth(); const login = async () => oktaAuth.signInWithRedirect(); const logout = async () => { signOut(auth); oktaAuth.signOut("/"); }; const { REACT_APP_FIREBASE_APIKEY, REACT_APP_FIREBASE_AUTHDOMAIN, REACT_APP_FIREBASE_PROJECTID, REACT_APP_FIREBASE_STORAGEBUCKET, REACT_APP_FIREBASE_MESSAGINGSENDERID, REACT_APP_FIREBASE_APPID, REACT_APP_ENV, } = process.env; const firebaseConfig = { apiKey: REACT_APP_FIREBASE_APIKEY, authDomain: REACT_APP_FIREBASE_AUTHDOMAIN, projectId: REACT_APP_FIREBASE_PROJECTID, storageBucket: REACT_APP_FIREBASE_STORAGEBUCKET, messagingSenderId: REACT_APP_FIREBASE_MESSAGINGSENDERID, appId: REACT_APP_FIREBASE_APPID, }; const app = initializeApp(firebaseConfig); const functions = getFunctions(app); const auth = getAuth(); if (REACT_APP_ENV === "development") { connectFunctionsEmulator(functions, "localhost", 5001); } const getGrades = async () => { const getGradesCall = httpsCallable(functions, "getGrades"); const resp = await getGradesCall({ name: selectedSemester.split(" ")[0], year: selectedSemester.split(" ")[1], }); setReportCardData(resp.data); }; const exchangeOktaTokenForFirebaseToken = async () => { const exchangeToken = httpsCallable( functions, "exchangeOktaTokenForFirebaseToken" ); const resp = await exchangeToken({ accessToken: authState.accessToken.accessToken }); await signInWithCustomToken(auth, resp.data.firebaseToken); }; if (authState?.isAuthenticated) { exchangeOktaTokenForFirebaseToken(); } return (

• {auth?.currentUser && ( Logout button> )} {!auth?.currentUser && ( Login button> )} li> ul> nav> {!auth?.currentUser && (

  In order to use this application you must be logged into your Okta account p>

  Login button> p> div> )} {auth?.currentUser && (

  Please select a semester to get your report card h1>

  { setSelectedSemester(e.target.value); }} > Fall 2021option> Spring 2021option> Fall 2022option> Spring 2022option> select> div> Get Grades button> div> div> {reportCardData && ( <> Name: b> {reportCardData.name} p> School: b> {reportCardData.school} p> Semester: b> {reportCardData.semester} -{" "} {reportCardData.year} p> Course th> Score th> Letter Grade th> tr> thead> {reportCardData.grades.map((grade, i) => { return ( {grade.course}td> {grade.score}td> {grade.letterGrade}td> tr> ); })} tbody> table> )} div> )} A Small demo using Oktaa> to Secure an{" "} Firebase hosted application{" "} a>{" "} with a serverless{" "} functiona> p> By Nik Fishera> p> footer> main> div> ); } export default Home;

• Visual Studio Code

  2,831 157,893 10.0 TypeScript

  Visual Studio Code

  

Visual Studio Code

Suggest a related project