Next.js server-side auth

Moralis General
#1

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.