july 24, 2022: node es6
july 24, 2022: reactjs-client-firebase-createuserwithemailpassword
july 21, 2022: bun javascript runtime
july 21, 2022: nodejs firebase functions deploy "index.js"
july 20, 2022: firebase deploy stop page reload 404 error [enable page reload]
july 19, 2022: javascript promise
july 13, 2022:: javascript "fetch"
july 11, 2022:: firebase admin sdk functionalities
July 08, 2022 0240 hours: firebase auth reactjs frontend
Delete User
var user = firebase.auth().currentUser;user.delete().then(function() {
// User deleted.
console.log('User Deleted');
}).catch(function(error) {
// An error happened.
});
Send a password reset email
var auth = firebase.auth();
var emailAddress = "user@example.com";auth.sendPasswordResetEmail(emailAddress).then(function() {
// Email sent.
console.log('Email Sent');
}).catch(function(error) {
// An error happened.
});
Set a user’s password
var user = firebase.auth().currentUser;
var newPassword = getASecureRandomPassword();user.updatePassword(newPassword).then(function() {
// Update successful.
}).catch(function(error) {
// An error happened.
});
Send a user a verification email
var user = firebase.auth().currentUser;user.sendEmailVerification().then(function() {
// Email sent.
}).catch(function(error) {
// An error happened.
});
Set a user’s email address
var user = firebase.auth().currentUser;user.updateEmail("user@example.com").then(function() {
// Update successful.
}).catch(function(error) {
// An error happened.
});
update user details
var user = firebase.auth().currentUser;user.updateProfile({
displayName: "Updated User's Name",
photoURL: "https://example.com/user/profile.jpg"
}).then(function() {
// Update successful.
console.log('User Profile Updated Successfully');
}).catch(function(error) {
// An error happened.
});
signed in user details
If a user isn't signed in, currentUser is null:
var user = firebase.auth().currentUser;if (user) {
// User is signed in.
if (user != null) {
name = user.displayName;
email = user.email;
photoUrl = user.photoURL;
emailVerified = user.emailVerified; uid = user.uid;
// The user's ID, unique to the Firebase project. Do NOT use
// this value to authenticate with your backend server, if
// you have one. Use User.getToken() instead.
}
} else {
// No user is signed in.
}
signout user
firebase.auth().signOut().then(function() {
// Sign-out successful.
console.log('User Logged Out!');
}).catch(function(error) {
// An error happened.
console.log(error);
});
authentication observer
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var isAnonymous = user.isAnonymous;
var uid = user.uid;
var providerData = user.providerData;
// ...
} else {
// User is signed out.
// ...
}
});
sign in user
var email="someone@example.com";
var password="password";
//Sign In User with Email and Password
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
sign up new user
var email="someone@example.com";
var password="password";
//Create User with Email and Password
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
reactjs install firebase
- npm install firebase
file: firebase-config.js
// Import the functions you need from the SDKs you need
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = firebase.initializeApp({
apiKey: "AIzaSyBhy23tSfse8bIO0mMLbYnyA5NQAXsoxtY",
authDomain: "beta-askmeidentity.firebaseapp.com",
projectId: "beta-askmeidentity",
storageBucket: "beta-askmeidentity.appspot.com",
messagingSenderId: "443769079350",
appId: "1:443769079350:web:3b84e0b62ef8f8c5b37a97"
});
export default firebaseConfig;
July 07, 2022: firebase deploy
firebase init
- ? Are you ready to proceed? Yes
- ? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
(*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
- ? What do you want to use as your public directory? build
- ? Configure as a single-page app (rewrite all urls to /index.html)? No
- ? Set up automatic builds and deploys with GitHub? No
- ? File build/index.html already exists. Overwrite? No
firebase login
npm run build
firebase deploy
July 05, 2022: react icons
npm install react-icons
import {FaAt, FaPhoneAlt, FaGithub, FaLinkedin, FaYoutube, FaFacebookSquare} from "react-icons/fa";
<FaGithub size={"15px"} style={{marginRight: "20px", color: "#000"}} />
July 05, 2022:: basic node express server
.png?raw=true)
firebase cli login with different account
firebase login:add <any other account ashish@ranjan.com>
july 04, 2022: reactjs absolute path
inside src folder file: jsconfig.json
{
"compilerOptions": {
"baseUrl": "."
},
"include": ["src"],
"exclude": ["node_modules", "build"]
}
july 04, 2022: stripe payment checkout example
client reactjs: App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<br /><br />
<form action="/create-checkout-session/1" method="POST">
<button type="submit">Checkout product 1</button>
</form>
<form action="/create-checkout-session/2" method="POST">
<button type="submit">Checkout product 2</button>
</form>
</header>
</div>
);
}
export default App;
server: index.js
require('dotenv').config();
const express = require("express");
const app = express();
const stripe = require('stripe')(process.env.STRIPE_TEST_SECRET_KEY);
// middleware
// endpoints
app.get("/", (req, res) => {
console.log("root route");
res.send("root route");
});
const purchase_items = {
1: 200,
2: 300
};
app.post('/create-checkout-session/:id', async (req, res) => {
const id = req.params.id;
// console.log("purchase_items.id:: ",purchase_items[id]);
// console.log(id);
const session = await stripe.checkout.sessions.create({
line_items: [
{
price_data: {
currency: 'usd',
product_data: {
name: 'T-shirt',
},
unit_amount: purchase_items[id] * 100,
},
quantity: 1,
},
],
mode: 'payment',
success_url: 'http://localhost:3000?success=1',
cancel_url: 'http://localhost:3000?success=0',
});
res.redirect(303, session.url);
});
// listen
const PORT = process.env.PORT || 1198;
app.listen(PORT, () => {
console.log("listening on port " + PORT);
});
July 04, 2022: basic node code and run
in command prompt
npm init -y
npm install express --save
npm install nodemon --save-dev
folder structure
- server
> node_modules
- index.js
- package-lock.json
- package.json
edit index.js file
const express = require("express");
const app = express();
// middleware
// endpoints
app.get("/", (req, res) => {
console.log("root route");
res.send("root route");
});
// listen
const PORT = process.env.PORT || 1198;
app.listen(PORT, ()=> {
console.log("listening on port " + PORT);
});
package.json file
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^2.0.18"
},
"dependencies": {
"express": "^4.18.1"
}
}
from command prompt run the server
nodemon start
in browser visit "http://localhost:1198/"
output: root route
July 04, 2022: node --save vs --save-dev
–save: The package installed is core dependency.
–save-dev: The package installed is not a core rather development dependency.
–save: All core dependency is listed under dependencies in package.json.
–save-dev: All development dependency is listed under devDependencies in package.json.
–save: It will be installed if a third person tries to install or clone your package.
–save-dev: It will be installed if a third person tries to clone your package.
–save: Example: express, body-parser etc.
–save-dev: Example: nodemon
July 04, 2022: node dependencies vs devDependencies
"dependencies": Packages required by your application in production.
"devDependencies": Packages that are only needed for local development and testing.
July 04, 2022: node devdependencies
install nodemon in dev dependencies:: npm install nodemon --save-dev
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^2.0.18"
}
}
July 04, 2022: node
npm init -y
//will simply generate an empty npm project without going through an interactive process.
//The -y flag when passed to NPM commands tells the generator to use the defaults instead of asking questions.
//The -y stands for yes.