logout metamask user onClick a button how can I implement it? - next.js

I am working on a dapp and I have implemented signing option using ether js but I want to also call a fucntion onclick a button to logout connected metamask wallet. Before I have used Moralis v1 logout fucntion but in this version there is no option to logout. How can i do this?
I am using Next.js, Ether js, and Moralis

Using ether.js you can manage login and logout using these functions:
async function login() {
const ethers = require('ethers');
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const walletAddress = await signer.getAddress(); //get user address
}
async function logout() {
const ethers = require('ethers');
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
await signer.provider.send('wallet_requestPermissions', [
{
eth_accounts: {}
}
])}

Related

Pinia firebase user emailVerified property loses reactivity

Currently I'm building an app that on user signup navigates the user to an email verification page. This page then watches the firebase user object inside of a Pinia store waiting for the emailVerified user property to update before directing them to a new page.
When I update the user object manually using vue devtools I can observe my console.log. When I receive the email verification email and use the link provided by firebase my watcher does not react to the user update. I can refresh the pinia store using my vue devtools and I see emailVerified inside my firebase user object has been updated to true but my watcher was never hit.
Any ideas on why I am losing reactivity when going through the email flow?
testStore.js
export const useTestStore = defineStore('test', () => {
const auth = getAuth()
const {user} = useAuth(auth)
return {
user: user,
}
})
emailVerification.js
<script setup>
const { user } = storeToRefs(testStore)
watch(user, () => {
console.log('Direct user to new page')
}, { deep:true })
</script>
For some reason when replacing my watcher with setInterval it seems to works... although this is not the ideal solution
setInterval(function () {
if(user){
if(user.value?.emailVerified) {
console.log('Direct user to new page');
}
}
}, 5000);

NextJs Auth0 - get user_metadata from user session middleware

i'm trying to get a user_metadata from the useUser hook. Here is what i've tried.
Auth Action
exports.onExecutePostLogin = async (event, api) => {
const namespace = 'https://my-tenant-auth0.com';
api.idToken.setCustomClaim(`${namespace}/user_metadata`, event.user.user_metadata);
api.accessToken.setCustomClaim(`${namespace}/user_metadata`, event.user.user_metadata);
};
NextJs Middleware.
const afterCallback = (req, res, session, state) => {
session.user.idToken = session.idToken;
session.user.testVar = JSON.stringify(session);
return session;
};
No user_metadata in session variable.
Also when i console.log(session) inside afterCallback for some reason the console.log() isn't printing anything.
This is actually working, i was just missing one step which is 'activating' the action. On the dashboard under actions/flows/login/.
Drag and drop the action.

Unable to transfer NEAR tokens between accounts using near-api-js

I am trying to transfer NEAR tokens between 2 testnet wallets using the near-api-js library in NextJS
Running send money function of the account, I am getting the following error
import { connect, keyStores } from "near-api-js";
export const NearConfig = async () => {
const config = {
networkId: "testnet",
keyStore: new keyStores.BrowserLocalStorageKeyStore(),
nodeUrl: "https://rpc.testnet.near.org",
walletUrl: "https://wallet.testnet.near.org",
helperUrl: "https://helper.testnet.near.org",
explorerUrl: "https://explorer.testnet.near.org",
};
return await connect(config);
};
setNear(await NearConfig());
const sendTokens = async () => {
try {
const account = await near.account(account_id);
await account.sendMoney(
"itissandeep98.testnet", // receiver account
"100000000" // amount in yoctoNEAR
);
} catch (error) {
console.log(error);
showAlert(error.message, "error");
}
};
On running account.getAccessKeys(); there are full access keys as well as functional access keys available, then why I am not able to send tokens?
Moreover, I don't understand the below screenshot from the docs(https://docs.near.org/docs/develop/front-end/introduction); why isn't it allowed?
Found this after one week of struggle: Connect FullAccess account with near-api-js
const PENDING_ACCESS_KEY_PREFIX = "pending_key";
const loginFullAccess = async (options) => {
const currentUrl = new URL(window.location.href);
const newUrl = new URL(wallet._walletBaseUrl + "/login/");
newUrl.searchParams.set('success_url', options.successUrl || currentUrl.href);
newUrl.searchParams.set('failure_url', options.failureUrl || currentUrl.href);
const accessKey = KeyPair.fromRandom("ed25519");
newUrl.searchParams.set("public_key", accessKey.getPublicKey().toString());
await wallet._keyStore.setKey(
wallet._networkId,
PENDING_ACCESS_KEY_PREFIX + accessKey.getPublicKey(),
accessKey
);
window.location.assign(newUrl.toString());
};
After login you can use the sendMoney function to transfer NEAR tokens between accounts
I wanted to open up near website asking user for permissions required for sending the tokens. Was struggling till I noticed this text in nearjs doc regarding account.sendMoney:
Hint
Use WalletConnection in the browser to redirect to NEAR Wallet for
Account/key management using the BrowserLocalStorageKeyStore.
Basically, instead of nearConnection needed to use walletConnection
// const account = await nearConnection.account(accountId) // Wrong
const account = await walletConnection.account() // Profit

Send an email using Firebase Cloud Functions in React Native

I would like to send emails in my React Native using Firebase Cloud Functions. Users should be able to send an email for reporting issues/feedback in the app. I have created a text input and a button in my react native app. The user should be able to specify their issue/feedback in the text input box and when they press the button I will receive their response as an email in my gmail or hotmail account. Can I achieve this using onCreate in Firebase Cloud Functions? If so how can I achieve this? What would the onCreate method look like as well as the button function in react native? I am very new to react native and firebase cloud functions. Unfortunately, I haven't seen any links about this.
Thank you.
Please see below:
const nodemailer = require('nodemailer');
const email = functions.config().email_credentials.email;
const password = functions.config().email_credentials.password;
const mailTransport = nodemailer.createTransport(`smtps://${email}:${password}#smtp.gmail.com`);
functions.database.ref('/feedbacks/{currentId}').onCreate((snapshot, context) => {
const feedback = snapshot.val().feedback;
const name = snapshot.val().name;
const mailOptions = {
from: snapshot.val().email,
replyTo: snapshot.val().email,
to: functions.config().email_credentials.email,
subject: `Feedback from `+name,
html: feedback,
};
try {
mailTransport.sendMail(mailOptions);
} catch(error) {
console.log(error);
}
return null;
});
Realtime database:
Your cloud function could look like this:
import * as functions from "firebase-functions";
import admin from "firebase-admin";
import nodemailer from "nodemailer";
const { email, password } = functions.config().gmail;
const mailTransport = nodemailer.createTransport(
`smtps://${email}:${password}#smtp.gmail.com`
);
export default functions.database
.ref("/feedbacks/{uid}")
.onCreate(async (eventSnapshot, context) => {
const data = eventSnapshot.val();
const { feedback } = data;
const mailOptions = {
from: functions.config().email_credentials.email,
replyTo: functions.config().email_credentials.email,
to: snapshot.val().email,
subject: `Feedback from `+name,
html: feedback,
};
await mailTransport.sendMail(mailOptions);
return null;
});
Make sure to save your email credentials under the firebase cloud function configs and NOT in the code. If you put it anywhere in the code it could potentialy been read by someone in some time. This is very importand.
In your Gmail ensure "Unsercure Apps" are enabled. More about it here.
Now if someon adds some data to the path feeds and email will be send.
Don't forget to deplyo your function with the configs.

Firebase Auth: How to unsubscribe from Auth observer after user creation and then subscribe again?

I am using the createUserWithEmailAndPassword() method for signing up new users. Immediately after this user creation process, I am sending an email verification. Then, in my onAuthStateChanged() I have a condition to check whether the user has verified their email. The problem is that the Auth observer is logging out the user BEFORE the email sendEmailVerification() method is complete.
Based on the below code, where is the best place to succuessfully unsubscribe the observer ? And, how to do it with Firebase JS SDK v9?
Let me explain my use case and show my code:
pages/sign-up:
async signUp() {
const auth = getAuth()
const batch = writeBatch(db)
try {
const UserCredential = await createUserWithEmailAndPassword(
auth,
this.formValues.email,
this.formValues.password
)
const userDocRef = doc(db, 'users', UserCredential.user.uid)
batch.set(userDocRef, {
uid: UserCredential.user.uid,
displayName: this.formValues.displayName,
photoURL: `https://gravatar.com/avatar/${md5(
this.formValues.email
)}?d=identicon`
})
const usernameDocRef = doc(db, 'usernames', this.formValues.displayName)
batch.set(usernameDocRef, { uid: UserCredential.user.uid })
// Commit batch
await batch.commit()
console.log('batch committed, user is:', UserCredential.user.uid)
await this.verifyEmail() // <-- user is logged out before this has a chance to fire!
verifyEmail():
async verifyEmail() {
const auth = getAuth()
const actionCodeSettings = {
url: `${this.$config.baseUrl}/email-confirmation/success`
}
try {
await sendEmailVerification(auth.currentUser, actionCodeSettings)
} catch (error) {
console.error('An email verification error happened', error)
this.errorMessage = error.message
}
},
In my onAuthStateChanged() method, I am immediately logging out the user IF their email is not yet verified. This causes the following error:
And here is how I have my onAuthStateChanged observer set up (it runs before the page is rendered):
~/plugins/auth.js:
onAuthStateChanged(auth, (user) => {
if (user) {
if (!user.emailVerified) {
// User has not verified the email yet
store.dispatch('logOutUser')
}
// TO DO: finish up rest of user logic
Should the unsubscribe be in the auth.js or the pages/sign-up page? I am unsure how to unsubscribe.
If you need to perform certain actions after signup/login, then you should unsubscribe from auth observer as you've figured out.
const authObserver = onAuthStateChanged(auth, (user) => {
// ...
}
async signUp() {
//unsubscribe here i.e when user clicks signup button
authObserver()
const auth = getAuth()
const batch = writeBatch(db)
// ...
}
Do note that, if you you auth observer is meant to redirect logged in user somewhere else then it won't do it now. So make sure you do that manually.

Resources