https://supertokens.com/ logo
Title
b

BRBT

10/25/2022, 7:27 AM
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
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

rp

10/25/2022, 7:28 AM
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

BRBT

10/25/2022, 7:38 AM
Thanks your for the answer I've seen an example code in your website
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

rp

10/25/2022, 7:38 AM
SessionRequest is just a type
it gives typings for
req.session
b

BRBT

10/25/2022, 7:40 AM
So whats the difference with Session ?
Oh okay it's an ExpressJs expression ?
Oh okay thanks you nevermind ^^
r

rp

10/25/2022, 7:43 AM
cool
b

BRBT

10/25/2022, 7:48 AM
So to get the user i'll only need to make an API function like this one ?
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

rp

10/25/2022, 7:49 AM
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
you want to update the
accessTokenPayload
to contain the user's email or whatever else you want
b

BRBT

10/25/2022, 7:53 AM
Okay and i do that in the frontend Configuration ?
r

rp

10/25/2022, 7:53 AM
no. backend
as the docs say 🙂
b

BRBT

10/25/2022, 7:56 AM
Okay in my configuration file it's SessionNode instead of Session. But i still override the function in SessionNode.init ?
r

rp

10/25/2022, 7:56 AM
yes
b

BRBT

10/25/2022, 7:57 AM
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

rp

10/25/2022, 8:13 AM
you need to call supertokens.init as well in this code
you can call it right outside of the
getEmail
function
b

BRBT

10/25/2022, 8:21 AM
Now with the following code it give me the error : Error: Please provide a valid URL path Whie pointing me at
import supertokens from 'supertokens-node'
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

rp

10/25/2022, 8:22 AM
are you providing valid info in appInfo object thats returned from
backendConfig()
?
b

BRBT

10/25/2022, 8:23 AM
I've copied the default appInfo config from the website
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

rp

10/25/2022, 8:27 AM
and whats the value of appInfo?
b

BRBT

10/25/2022, 8:27 AM
js
export const appInfo = {
  appName: "Supertokens demo",
  apiDomain: "http://localhost:3000",
  websiteDomain: "http://localhost:3000",
  apiBasePath: "/api/auth",
  websiteBasePath: "/auth",
}
r

rp

10/25/2022, 8:27 AM
I see.
Can i see the full stack trace for the error you got?
b

BRBT

10/25/2022, 8:29 AM
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)
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

rp

10/25/2022, 8:32 AM
the getEmail function - is that in the api folder in nextjs or where?
b

BRBT

10/25/2022, 8:33 AM
/pages/api/getEmail.js
r

rp

10/25/2022, 8:33 AM
hmm. Which version of nodejs are you using on your machine?
b

BRBT

10/25/2022, 8:33 AM
v19.0.0
r

rp

10/25/2022, 8:34 AM
can you try with 16.0.0?
b

BRBT

10/25/2022, 8:34 AM
how does i downgrade ?
r

rp

10/25/2022, 8:34 AM
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

BRBT

10/25/2022, 8:36 AM
npm i node 16.0.0 ?
r

rp

10/25/2022, 8:37 AM
well, im sure you can figure this out via a google search
im not too sure
b

BRBT

10/25/2022, 8:42 AM
Okay i did it
Using nvm, same error
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

rp

10/25/2022, 8:44 AM
thats very strange
can we get on a quick call to debug?
b

BRBT

10/25/2022, 8:45 AM
Sure
r

rp

10/25/2022, 8:45 AM
i'll send a link. 1 min
b

BRBT

10/25/2022, 8:47 AM
im installing zoom should take few secs
r

rp

10/25/2022, 8:48 AM
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

BRBT

10/25/2022, 10:39 AM
I understood it works.
Thanks a lot for your time and your patience @rp
r

rp

10/25/2022, 11:14 AM
happy to help :))