https://supertokens.com/
Join Discord
Hi i've followed your tutorial to integrate Supertokens to NextJS. I've got a docker instance with a...
# support-questions-legacy
b
Hi i've followed your tutorial to integrate Supertokens to NextJS. I've got a docker instance with a postgresql set up by database and so faar my login seems to be working. I would like to create a navbar that will show the user email address. So i know that i need to get the UserID with the Session and then make an API call to get it. But i can't figure out how to do it. Here's the code
Copy code
js
import { useEffect } from 'react';
import Link from 'next/link'
import { EmailPasswordAuth } from 'supertokens-auth-react/recipe/emailpassword';
import Session from 'supertokens-auth-react/recipe/session';
import EmailPassword from "supertokens-node/recipe/emailpassword";
import supertokens from 'supertokens-node'
import { backendConfig } from '../config/backendConfig'

supertokens.init(backendConfig())
export default function Navbar() {
    useEffect( () => {
       Session.getUserId().then(userID => 
           EmailPassword.getUserById(userID).then( user =>
           console.log(user.email)
           )
       )
    }, [])
r
Hey! The 
EmailPassword.getUserById
function is from the backend SDK. So you might wanna create an API that does session verification first and gets the user ID from there, and then calls this function. Then from the frontend, you simply call this API to get the email
b
Thanks your for the answer I've seen an example code in your website
Copy code
js
import EmailPassword from "supertokens-node/recipe/emailpassword";
import { superTokensNextWrapper } from 'supertokens-node/nextjs'
import { verifySession } from "supertokens-node/recipe/session/framework/express";
import { SessionRequest } from "supertokens-node/framework/express";

export default async function likeComment(req: SessionRequest, res: any) {
    await superTokensNextWrapper(
        async (next) => {
            await verifySession()(req, res, next);
        },
        req,
        res
    )

    let userId = req.session!.getUserId();
    // You can learn more about the `User` object over here https://github.com/supertokens/core-driver-interface/wiki
    let userInfo = await EmailPassword.getUserById(userId);
    //....
}
But i don't understand what is the function of SessionRequest and how i can use it
r
SessionRequest is just a type
it gives typings for 
req.session
b
So whats the difference with Session ?
Oh okay it's an ExpressJs expression ?
Oh okay thanks you nevermind ^^
r
cool
b
So to get the user i'll only need to make an API function like this one ?
Copy code
js
import EmailPassword from "supertokens-node/recipe/emailpassword";
import { superTokensNextWrapper } from 'supertokens-node/nextjs'
import { verifySession } from "supertokens-node/recipe/session/framework/express";
import { SessionRequest } from "supertokens-node/framework/express";

export default async function getEmail(req, res) {
    await superTokensNextWrapper(
        async (next) => {
            await verifySession()(req, res, next);
        },
        req,
        res
    )

    let userId = req.session!.getUserId();
    let userInfo = await EmailPassword.getUserById(userId);
    return userInfo
  
}
r
yup
or you can add this info into the session's payload when the session is created and just read that from the frontend - we have docs for how to modify the session payload
b
r
you want to update the 
accessTokenPayload
to contain the user's email or whatever else you want
b
Okay and i do that in the frontend Configuration ?
r
no. backend
as the docs say 🙂
b
Okay in my configuration file it's SessionNode instead of Session. But i still override the function in SessionNode.init ?
r
yes
b
Okay, ill try this out. Thank you
This code give me the error : Unhandled Runtime Error TypeError: Cannot set properties of undefined (setting '__supertokensFromNextJS')
r
you need to call supertokens.init as well in this code
you can call it right outside of the 
getEmail
function
b
Now with the following code it give me the error : Error: Please provide a valid URL path Whie pointing me at
Copy code
import supertokens from 'supertokens-node'
Copy code
js
import EmailPassword from "supertokens-node/recipe/emailpassword";
import { superTokensNextWrapper } from 'supertokens-node/nextjs'
import { verifySession } from "supertokens-node/recipe/session/framework/express";
import { SessionRequest } from "supertokens-node/framework/express";

import supertokens from 'supertokens-node'
import { backendConfig } from '../../config/backendConfig'

supertokens.init(backendConfig())

export default async function getEmail(req, res) {
    await superTokensNextWrapper(
        async (next) => {
            await verifySession()(req, res, next);
        },
        req,
        res
    )

    let userId = req.session.getUserId();
    // You can learn more about the `User` object over here https://github.com/supertokens/core-driver-interface/wiki
    let userInfo = await EmailPassword.getUserById(userId);
    return userInfo
  
}
r
are you providing valid info in appInfo object thats returned from 
backendConfig()
?
b
I've copied the default appInfo config from the website
Copy code
js
import EmailPasswordNode from 'supertokens-node/recipe/emailpassword'
import SessionNode from 'supertokens-node/recipe/session'
import { appInfo } from './appInfo'
import { TypeInput } from "supertokens-node/types";

export const backendConfig = () => {
  return {
    framework: "express",
    supertokens: {
      // https://try.supertokens.com is for demo purposes. Replace this with the address of your core instance (sign up on supertokens.com), or self host a core.
      connectionURI: "http://localhost:3567",
      // apiKey: "IF YOU HAVE AN API KEY FOR THE CORE, ADD IT HERE",
    },
    appInfo,
    recipeList: [
      EmailPasswordNode.init(),
      SessionNode.init(),
    ],
    isInServerlessEnv: true,
  }
}
r
and whats the value of appInfo?
b
Copy code
js
export const appInfo = {
  appName: "Supertokens demo",
  apiDomain: "http://localhost:3000",
  websiteDomain: "http://localhost:3000",
  apiBasePath: "/api/auth",
  websiteBasePath: "/auth",
}
r
I see.
Can i see the full stack trace for the error you got?
b
Copy code
Unhandled Runtime Error
Error: Please provide a valid URL path

Source
normaliseURLPathOrThrowError
node_modules/supertokens-node/lib/build/normalisedURLPath.js (72:0)
new NormalisedURLPath
node_modules/supertokens-node/lib/build/normalisedURLPath.js (35:0)
Object.normaliseInputAppInfoOrThrowError
node_modules/supertokens-node/lib/build/utils.js (54:0)
new SuperTokens
node_modules/supertokens-node/lib/build/supertokens.js (341:0)
SuperTokensWrapper.init
node_modules/supertokens-node/lib/build/supertokens.js (384:0)
Copy code
Call Stack
./pages/api/getEmail.js
file:///home/brbt/Projects/nextjs-supertokens/supertokens-demo/.next/static/chunks/pages/_app.js (1388:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///home/brbt/Projects/nextjs-supertokens/supertokens-demo/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./components/Navbar.js (20:77)
./components/Navbar.js
file:///home/brbt/Projects/nextjs-supertokens/supertokens-demo/.next/static/chunks/pages/_app.js (1289:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///home/brbt/Projects/nextjs-supertokens/supertokens-demo/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./pages/_app.js (13:76)
./pages/_app.js
file:///home/brbt/Projects/nextjs-supertokens/supertokens-demo/.next/static/chunks/pages/_app.js (1377:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///home/brbt/Projects/nextjs-supertokens/supertokens-demo/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_app&page=%2F_app! (5:15)
eval
node_modules/next/dist/client/route-loader.js (211:50)
r
the getEmail function - is that in the api folder in nextjs or where?
b
/pages/api/getEmail.js
r
hmm. Which version of nodejs are you using on your machine?
b
v19.0.0
r
can you try with 16.0.0?
b
how does i downgrade ?
r
you can use 
nvm
for that - or google it
we will try and replicate this issue with node 19 and see if we can fix it
b
npm i node 16.0.0 ?
r
well, im sure you can figure this out via a google search
im not too sure
b
Okay i did it
Using nvm, same error
Copy code
bash
[brbt@legion ~]$ nvm use 16.0.0
Now using node v16.0.0 (npm v7.10.0)
[brbt@legion ~]$ node 
Welcome to Node.js v16.0.0.
r
thats very strange
can we get on a quick call to debug?
b
Sure
r
i'll send a link. 1 min
b
im installing zoom should take few secs
r
sure
So the issue is that you are importing 
getEmail
in Navbar.js which is causing the backend supertokens.init to run on the frontend.
You want to instead make an HTTP call to that API from the frontend
b
I understood it works.
Thanks a lot for your time and your patience @rp_st
r
happy to help :))
5 Views
PreviousNext
Powered by

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).

Powered by