From 24cd21388a82ee3c83326e875a36a6e599e7a671 Mon Sep 17 00:00:00 2001 From: Incharajayaram Date: Wed, 16 Oct 2024 20:35:46 +0530 Subject: [PATCH 1/3] changes in dependencies, ui and improved readme part of firebase auth --- README.md | 39 +++++++++++++++++++++++++++ package-lock.json | 55 +++++++++++++++++++++----------------- package.json | 2 +- src/components/js/Stars.js | 2 +- src/hooks/useGetStars.js | 2 +- 5 files changed, 73 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index f37a011..979dc73 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,45 @@ REACT_APP_FIREBASE_STORAGE_BUCKET="" REACT_APP_FIREBASE_MESSAGING_SENDER_ID="" REACT_APP_FIREBASE_APP_ID="" ``` +### GitHub Authentication Configuration + +To enable GitHub authentication for the Custom Code Editor, follow these steps: + +1. **Enable GitHub Authentication in Firebase Console:** + - Go to your Firebase project in the [Firebase Console](https://firebase.google.com/). + - Navigate to **Authentication** > **Sign-in method**. + - Enable **GitHub** as a sign-in provider. + - Note the **Authorization Callback URL** provided by Firebase, as you will need this for your GitHub OAuth App. + +2. **Register a New OAuth Application on GitHub:** + - Go to your GitHub [Developer Settings](https://github.com/settings/developers). + - Click on **OAuth Apps** and select **New OAuth App**. + - Fill in the application details: + - **Application Name**: Custom Code Editor + - **Homepage URL**: + - For **local development**, use `http://localhost:3000` + - For **production deployment**, use your public URL (e.g., `https://custom-code-editor.vercel.app/`) + - **Authorization Callback URL**: + - Use the **Authorization Callback URL** provided by Firebase. + - Click **Register Application**. + +3. **Retrieve GitHub Client ID and Client Secret:** + - Once the app is registered, you will see the **Client ID** and **Client Secret** in the GitHub OAuth App settings. Copy these values. + +4. **Add GitHub OAuth Credentials to Firebase:** + - Return to the Firebase Console and go back to the **GitHub** provider configuration. + - Enter the **Client ID** and **Client Secret** from GitHub. + - Save these settings. + +5. **Update Environment Variables:** + - Open your `.env` file in your project root and add the following: + + ```plaintext + REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID + REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET + ``` + + - Replace `YOUR_GITHUB_CLIENT_ID` and `YOUR_GITHUB_CLIENT_SECRET` with the values you copied from GitHub. ## Local Configuration diff --git a/package-lock.json b/package-lock.json index a642d79..243df89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@mui/styled-engine-sc": "^6.0.0-alpha.18", "@snaddyvitch-dispenser/react-router-sitemap": "^1.2.6", "CustomCodeEditor": "file:", - "firebase": "^10.14.0", + "firebase": "^10.14.1", "monaco-themes": "^0.4.4", "notistack": "^3.0.1", "react": "^18.3.1", @@ -2694,9 +2694,10 @@ "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/@firebase/app": { - "version": "0.10.12", - "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.10.12.tgz", - "integrity": "sha512-fgBqe5j7GKv7/eMfyU4N1FdiW6O1EyrrVbMa8rJOT5MYNpCXqdL/5NNcLDStS1l6CN7h65a7jUNXmMnMSWo0sw==", + "version": "0.10.13", + "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.10.13.tgz", + "integrity": "sha512-OZiDAEK/lDB6xy/XzYAyJJkaDqmQ+BCtOEPLqFvxWKUz5JbBmej7IiiRHdtiIOD/twW7O5AxVsfaaGA/V1bNsA==", + "license": "Apache-2.0", "dependencies": { "@firebase/component": "0.6.9", "@firebase/logger": "0.4.2", @@ -2756,11 +2757,12 @@ "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/@firebase/app-compat": { - "version": "0.2.42", - "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.42.tgz", - "integrity": "sha512-vPI0Aksk8ZuHywigyTxrx/oWbuD41kHxajfxRly7urHOFRiXKxf/q2ftgmcMVPfIeg0K02LzYNBmoh2PWzERpg==", + "version": "0.2.43", + "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.43.tgz", + "integrity": "sha512-HM96ZyIblXjAC7TzE8wIk2QhHlSvksYkQ4Ukh1GmEenzkucSNUmUX4QvoKrqeWsLEQ8hdcojABeCV8ybVyZmeg==", + "license": "Apache-2.0", "dependencies": { - "@firebase/app": "0.10.12", + "@firebase/app": "0.10.13", "@firebase/component": "0.6.9", "@firebase/logger": "0.4.2", "@firebase/util": "1.10.0", @@ -3086,9 +3088,10 @@ "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/@firebase/messaging": { - "version": "0.12.11", - "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.11.tgz", - "integrity": "sha512-zn5zGhF46BmiZ7W9yAUoHlqzJGakmWn1FNp//roXHN62dgdEFIKfXY7IODA2iQiXpmUO3sBdI/Tf+Hsft1mVkw==", + "version": "0.12.12", + "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.12.tgz", + "integrity": "sha512-6q0pbzYBJhZEtUoQx7hnPhZvAbuMNuBXKQXOx2YlWhSrlv9N1m0ZzlNpBbu/ItTzrwNKTibdYzUyaaxdWLg+4w==", + "license": "Apache-2.0", "dependencies": { "@firebase/component": "0.6.9", "@firebase/installations": "0.6.9", @@ -3102,12 +3105,13 @@ } }, "node_modules/@firebase/messaging-compat": { - "version": "0.2.11", - "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.11.tgz", - "integrity": "sha512-2NCkfE1L9jSn5OC+2n5rGAz5BEAQreK2lQGdPYQEJlAbKB2efoF+2FdiQ+LD8SlioSXz66REfeaEdesoLPFQcw==", + "version": "0.2.12", + "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.12.tgz", + "integrity": "sha512-pKsiUVZrbmRgdImYqhBNZlkKJbqjlPkVdQRZGRbkTyX4OSGKR0F/oJeCt1a8jEg5UnBp4fdVwSWSp4DuCovvEQ==", + "license": "Apache-2.0", "dependencies": { "@firebase/component": "0.6.9", - "@firebase/messaging": "0.12.11", + "@firebase/messaging": "0.12.12", "@firebase/util": "1.10.0", "tslib": "^2.1.0" }, @@ -3118,7 +3122,8 @@ "node_modules/@firebase/messaging-compat/node_modules/tslib": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", - "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", + "license": "0BSD" }, "node_modules/@firebase/messaging-interop-types": { "version": "0.2.2", @@ -3128,7 +3133,8 @@ "node_modules/@firebase/messaging/node_modules/tslib": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", - "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", + "license": "0BSD" }, "node_modules/@firebase/performance": { "version": "0.6.9", @@ -10792,16 +10798,17 @@ } }, "node_modules/firebase": { - "version": "10.14.0", - "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.14.0.tgz", - "integrity": "sha512-/yB/OE4bfBbmtfku0DCdW6nWMHYVayN6xWKw68ztedxqGevfYDoPoygBXiLmvBHdWdBa+IlhJDkdUUiEEpcAUw==", + "version": "10.14.1", + "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.14.1.tgz", + "integrity": "sha512-0KZxU+Ela9rUCULqFsUUOYYkjh7OM1EWdIfG6///MtXd0t2/uUIf0iNV5i0KariMhRQ5jve/OY985nrAXFaZeQ==", + "license": "Apache-2.0", "dependencies": { "@firebase/analytics": "0.10.8", "@firebase/analytics-compat": "0.2.14", - "@firebase/app": "0.10.12", + "@firebase/app": "0.10.13", "@firebase/app-check": "0.8.8", "@firebase/app-check-compat": "0.3.15", - "@firebase/app-compat": "0.2.42", + "@firebase/app-compat": "0.2.43", "@firebase/app-types": "0.9.2", "@firebase/auth": "1.7.9", "@firebase/auth-compat": "0.5.14", @@ -10814,8 +10821,8 @@ "@firebase/functions-compat": "0.3.14", "@firebase/installations": "0.6.9", "@firebase/installations-compat": "0.2.9", - "@firebase/messaging": "0.12.11", - "@firebase/messaging-compat": "0.2.11", + "@firebase/messaging": "0.12.12", + "@firebase/messaging-compat": "0.2.12", "@firebase/performance": "0.6.9", "@firebase/performance-compat": "0.2.9", "@firebase/remote-config": "0.4.9", diff --git a/package.json b/package.json index 57ad998..db6ef3c 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@mui/styled-engine-sc": "^6.0.0-alpha.18", "@snaddyvitch-dispenser/react-router-sitemap": "^1.2.6", "CustomCodeEditor": "file:", - "firebase": "^10.14.0", + "firebase": "^10.14.1", "monaco-themes": "^0.4.4", "notistack": "^3.0.1", "react": "^18.3.1", diff --git a/src/components/js/Stars.js b/src/components/js/Stars.js index 0c39d61..21150b2 100644 --- a/src/components/js/Stars.js +++ b/src/components/js/Stars.js @@ -25,7 +25,7 @@ const Stars = () => {
- Star on GitHub + Stars on GitHub {repositoryStarts} {repositoryStarts > 1 ? "stars" : "star"}{" "} diff --git a/src/hooks/useGetStars.js b/src/hooks/useGetStars.js index 125f94c..8a490cd 100644 --- a/src/hooks/useGetStars.js +++ b/src/hooks/useGetStars.js @@ -21,7 +21,7 @@ export const useGetStars = () => { setRepositoryStars(result.stargazers_count); setFetchState(initialFetchState); } else - throw Error("Error happend in getting repository stars, retry again!."); + throw Error("Error happened in getting repository stars, retry again!."); } catch (error) { setFetchState({ ...initialFetchState, From b7f1c0da350c5d83ece4cc68b90453cb824ce1e3 Mon Sep 17 00:00:00 2001 From: Incharajayaram Date: Wed, 16 Oct 2024 20:41:13 +0530 Subject: [PATCH 2/3] firebase auth readme improvements --- README.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/README.md b/README.md index f37a011..979dc73 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,45 @@ REACT_APP_FIREBASE_STORAGE_BUCKET="" REACT_APP_FIREBASE_MESSAGING_SENDER_ID="" REACT_APP_FIREBASE_APP_ID="" ``` +### GitHub Authentication Configuration + +To enable GitHub authentication for the Custom Code Editor, follow these steps: + +1. **Enable GitHub Authentication in Firebase Console:** + - Go to your Firebase project in the [Firebase Console](https://firebase.google.com/). + - Navigate to **Authentication** > **Sign-in method**. + - Enable **GitHub** as a sign-in provider. + - Note the **Authorization Callback URL** provided by Firebase, as you will need this for your GitHub OAuth App. + +2. **Register a New OAuth Application on GitHub:** + - Go to your GitHub [Developer Settings](https://github.com/settings/developers). + - Click on **OAuth Apps** and select **New OAuth App**. + - Fill in the application details: + - **Application Name**: Custom Code Editor + - **Homepage URL**: + - For **local development**, use `http://localhost:3000` + - For **production deployment**, use your public URL (e.g., `https://custom-code-editor.vercel.app/`) + - **Authorization Callback URL**: + - Use the **Authorization Callback URL** provided by Firebase. + - Click **Register Application**. + +3. **Retrieve GitHub Client ID and Client Secret:** + - Once the app is registered, you will see the **Client ID** and **Client Secret** in the GitHub OAuth App settings. Copy these values. + +4. **Add GitHub OAuth Credentials to Firebase:** + - Return to the Firebase Console and go back to the **GitHub** provider configuration. + - Enter the **Client ID** and **Client Secret** from GitHub. + - Save these settings. + +5. **Update Environment Variables:** + - Open your `.env` file in your project root and add the following: + + ```plaintext + REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID + REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET + ``` + + - Replace `YOUR_GITHUB_CLIENT_ID` and `YOUR_GITHUB_CLIENT_SECRET` with the values you copied from GitHub. ## Local Configuration From 579296e76047ddf8803bd795600338de4b5ffb45 Mon Sep 17 00:00:00 2001 From: Incharajayaram Date: Wed, 16 Oct 2024 20:43:14 +0530 Subject: [PATCH 3/3] github auth readme improvements --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 979dc73..ed19fb6 100644 --- a/README.md +++ b/README.md @@ -119,7 +119,7 @@ REACT_APP_FIREBASE_STORAGE_BUCKET="" REACT_APP_FIREBASE_MESSAGING_SENDER_ID="" REACT_APP_FIREBASE_APP_ID="" ``` -### GitHub Authentication Configuration +## GitHub Authentication Configuration To enable GitHub authentication for the Custom Code Editor, follow these steps: