mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-24 23:41:14 +02:00
Code Issues Releases Wiki Activity

make auth work with correct provider

Browse Source
This commit is contained in:
Kushagra Gour
2024-05-09 16:44:28 +05:30
parent 71582cf608
commit 3482fabefd
5 changed files with 70 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
offscreen.html
View File

@@ -1,3 +1,2 @@
<!doctype html> <!doctype html>
<audio></audio>
<script src="./offscreen.js"></script> <script src="./offscreen.js"></script>

6
offscreen.js
View File

@@ -24,6 +24,7 @@ function handleChromeMessages(message, sender, sendResponse) {
data = JSON.parse(data); data = JSON.parse(data);
self.removeEventListener('message', handleIframeMessage); self.removeEventListener('message', handleIframeMessage);
// being sent back to worker
sendResponse(data); sendResponse(data);
} catch (e) { } catch (e) {
console.log(`json parse failed - ${e.message}`); console.log(`json parse failed - ${e.message}`);
@@ -35,6 +36,9 @@ function handleChromeMessages(message, sender, sendResponse) {
// Initialize the authentication flow in the iframed document. You must set the // Initialize the authentication flow in the iframed document. You must set the
// second argument (targetOrigin) of the message in order for it to be successfully // second argument (targetOrigin) of the message in order for it to be successfully
// delivered. // delivered.
iframe.contentWindow.postMessage({ initAuth: true }, new URL(_URL).origin); iframe.contentWindow.postMessage(
{ initAuth: true, providerName: message.providerName },
new URL(_URL).origin
);
return true; return true;
} }

28
packages/signup/signInWithPopup.js
View File

@@ -1,9 +1,9 @@
setTimeout(() => { import {
console.log('firing postmessag from iframe'); signInWithPopup,
// window.top.postMessage('{"a":2}', "*"); GithubAuthProvider,
}, 3000); GoogleAuthProvider,
getAuth
import { signInWithPopup, GoogleAuthProvider, getAuth } from 'firebase/auth'; } from 'firebase/auth';
import { initializeApp } from 'firebase/app'; import { initializeApp } from 'firebase/app';
import { config } from './firebaseConfig.js'; import { config } from './firebaseConfig.js';
@@ -15,21 +15,25 @@ const auth = getAuth();
// You will need this to assign the targetOrigin for postMessage. // You will need this to assign the targetOrigin for postMessage.
const PARENT_FRAME = document.location.ancestorOrigins[0]; const PARENT_FRAME = document.location.ancestorOrigins[0];
// This demo uses the Google auth provider, but any supported provider works.
// Make sure that you enable any provider you want to use in the Firebase Console.
// https://console.firebase.google.com/project/_/authentication/providers
const PROVIDER = new GoogleAuthProvider();
function sendResponse(result) { function sendResponse(result) {
globalThis.parent.self.postMessage(JSON.stringify(result), PARENT_FRAME); globalThis.parent.self.postMessage(JSON.stringify(result), PARENT_FRAME);
} }
globalThis.addEventListener('message', function ({ data }) { globalThis.addEventListener('message', function ({ data }) {
if (data.initAuth) { if (data.initAuth) {
const { providerName } = data;
let provider;
if (providerName === 'google') {
provider = new GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/userinfo.profile');
} else {
provider = new GithubAuthProvider();
}
// Opens the Google sign-in page in a popup, inside of an iframe in the // Opens the Google sign-in page in a popup, inside of an iframe in the
// extension's offscreen document. // extension's offscreen document.
// To centralize logic, all respones are forwarded to the parent frame, // To centralize logic, all respones are forwarded to the parent frame,
// which goes on to forward them to the extension's service worker. // which goes on to forward them to the extension's service worker.
signInWithPopup(auth, PROVIDER).then(sendResponse).catch(sendResponse); signInWithPopup(auth, provider).then(sendResponse).catch(sendResponse);
} }
}); });

80
src/auth.js
View File

@@ -1,57 +1,59 @@
import { trackEvent } from './analytics'; import { trackEvent } from './analytics';
import { auth } from './firebaseInit'; import { auth } from './firebaseInit';
import { log } from './utils';
import { import {
GithubAuthProvider, GithubAuthProvider,
TwitterAuthProvider,
GoogleAuthProvider, GoogleAuthProvider,
signInWithPopup, signOut,
signOut signInWithCredential
} from 'firebase/auth'; } from 'firebase/auth/web-extension';
import { log } from './utils';
import { signInWithCredential } from 'firebase/auth/web-extension';
export const authh = { export const authh = {
logout() { logout() {
signOut(); signOut(auth);
}, },
async login(providerName) { async login(providerName) {
debugger; const result = await chrome.runtime.sendMessage({
const authenticationObject = await chrome.runtime.sendMessage({
type: 'firebase-auth', type: 'firebase-auth',
provider: providerName providerName
}); });
const credential =
GoogleAuthProvider.credentialFromResult(authenticationObject);
// authenticationObject is of the type UserCredentialImpl. Use it to authenticate here
return signInWithCredential(auth, credential);
var provider; if (
if (providerName === 'facebook') { result.name === 'FirebaseError' &&
provider = new FacebookAuthProvider(); result.code === 'auth/account-exists-with-different-credential'
} else if (providerName === 'twitter') { ) {
provider = new TwitterAuthProvider(); alert(
} else if (providerName === 'google') { 'You have already signed up with the same email using different social login'
provider = new GoogleAuthProvider(); );
provider.addScope('https://www.googleapis.com/auth/userinfo.profile'); return;
} else {
provider = new GithubAuthProvider();
} }
return signInWithPopup(auth, provider) let credential;
.then(function () { switch (providerName) {
trackEvent('fn', 'loggedIn', providerName); case 'google':
// Save to recommend next time credential = GoogleAuthProvider.credentialFromResult(result);
window.db.local.set({ break;
lastAuthProvider: providerName case 'github':
}); credential = GithubAuthProvider.credentialFromResult(result);
}) break;
.catch(function (error) { }
log(error);
if (error.code === 'auth/account-exists-with-different-credential') { // authenticationObject is of the type UserCredentialImpl. Use it to authenticate here
alert( return signInWithCredential(auth, credential).then(() => {
'You have already signed up with the same email using different social login' trackEvent('fn', 'loggedIn', providerName);
); // Save to recommend next time
} window.db.local.set({
lastAuthProvider: providerName
}); });
});
return signInWithPopup(auth, provider).catch(function (error) {
log(error);
if (error.code === 'auth/account-exists-with-different-credential') {
alert(
'You have already signed up with the same email using different social login'
);
}
});
} }
}; };

13
src/eventPage.js
View File

@@ -79,20 +79,22 @@ async function closeOffscreenDocument() {
await chrome.offscreen.closeDocument(); await chrome.offscreen.closeDocument();
} }
function getAuth() { function getAuth(providerName) {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
// sending to offscreen document
const auth = await chrome.runtime.sendMessage({ const auth = await chrome.runtime.sendMessage({
type: 'firebase-auth', type: 'firebase-auth',
target: 'offscreen' target: 'offscreen',
providerName
}); });
auth?.name !== 'FirebaseError' ? resolve(auth) : reject(auth); auth?.name !== 'FirebaseError' ? resolve(auth) : reject(auth);
}); });
} }
async function firebaseAuth() { async function firebaseAuth(providerName) {
await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH); await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH);
const auth = await getAuth() const auth = await getAuth(providerName)
.then(auth => { .then(auth => {
console.log('User Authenticated', auth); console.log('User Authenticated', auth);
return auth; return auth;
@@ -115,8 +117,9 @@ async function firebaseAuth() {
} }
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
// received from the app
if (message.type === 'firebase-auth') { if (message.type === 'firebase-auth') {
firebaseAuth().then(sendResponse); firebaseAuth(message.providerName).then(sendResponse);
return true; return true;
} }
}); });