Hey all. Iām Archie. Discovered html javascript back in 2016 when studying Information Tech and never found motivation. Then a close friend introduced me to Ethereum in 2019. So over the last 14 months, I explored the IOT course, and found a desire for building full stack dapps.
My first JavaScript UI library I noticed was React. I enjoyed learning with CRA package, and 6 months later I have moved on to Next.js - a react framework. I plan on delving into serverside rendering and so on. However, I have come across an issue with Moralis. Completely open to work-arounds.
So im building a dapp/game w/ next.js and moralis. I need to run async code in an api route (cloud function on next.js serverside, not Moralis). I want to secure my route with moralis metamask auth.
So I tried posting the api from frontend with the signature string from the user object. Then, in the api, query the _EthAddress class in Moralis with that signature from the req.body. After some testing with other classes, I noticed that the _EthAddress is returning undefined results from querys, despite that I can see 1 object in that class on Moralis db.
Heres some code:
the react component
import Moralis from 'moralis'
import { useMoralis, useMoralisCloudFunction, useMoralisQuery } from 'react-moralis'
import axios from "axios";
export default function EthOrb() {
const { isAuthenticated, user } = useMoralis()
const address = user?.get('ethAddress')
const authData = user?.get('authData')
async function testUser() {
try {
console.log(authData.moralisEth.signature)
const postTest = await axios.post('/api/moralisTest', {
address: address,
sigAuth: authData.moralisEth.signature
}).then(response => console.log(response.data))
.catch(error => console.log(error))
}
catch (e) {
console.log(e)
dispatch(setStatus('Not Started'))
}
//markup return
if (!isAuthenticated || !address) return (
<div className="flex items-center justify-center py-10">
<AlertCard title="Whoa There!" body="You require metamask to use these decentralised applications" failure />
</div>
)
else return (
<div>
<button onClick={testUser}> test user in api
<div>
);
}
api route
import Moralis from 'moralis/node'
import type { NextApiRequest, NextApiResponse } from 'next'
export default async (req: NextApiRequest, res: NextApiResponse) => {
//Moralis Server config.
const APP_ID = process.env.MORALIS_APP_ID;
const SERVER_ID = process.env.MORALIS_SERVER_URL
Moralis.initialize(APP_ID);
Moralis.serverURL = SERVER_ID;
//Req body:
const user: string = req.body.address
const price: number = req.body.ethprice
const gameChoice: boolean = req.body.gamechoice
const signatureAuth: string = req.body.sigAuth
console.log(gameChoice, price, user, signatureAuth)
//extend the Moralis class and instantiate new query
const userAuth = Moralis.Object.extend("_EthAddress");
const queryAuth = new Moralis.Query(userAuth);
queryAuth.equalTo("objectId", user);
queryAuth.equalTo("signature", signatureAuth);
const results = await queryAuth.find().then((results) => {
console.log(results)
res.json({results})
})
.catch(error => res.json({error: error}))
}
edit: For now, I shall create a new class for user sessions. Then add to this class when the user interacts with my frontend, then pinging the backend, then the backend cleans up and clears that session entry after server side dapp logic.