https://supertokens.com/
Join Discord
Im trying to implement where i can 'sign up as teacher' and 'sign up as student' can anyone guide/he...
# general
d
Im trying to implement where i can 'sign up as teacher' and 'sign up as student' can anyone guide/help me to try doing that?
r
hey @duta
What's your tech stack?
d
next js, prisma, supertokens
r
got it.
Do you want to have one common form for both and they can select if they are a student or a teacher? Or separate pages entirely for both?
d
in the landing page it has 2 buttons with different options
i think i want to store the account type in the user metadata
r
Whcih recipe are you using?
d
thirdparty only
r
Right. So you want to start by embedding the Sign in form on two pages: https://supertokens.com/docs/thirdparty/common-customizations/embed-sign-in-up-form
On whatever path you like
Then on the frontend, you want to override the 
getOAuthAuthorisationURL
function (https://supertokens.com/docs/thirdparty/advanced-customizations/frontend-functions-override/usage) to store some info in the localstorage indicating what type (student or teacher) is trying to login / sign up (based on the current path of the page) You also want to give the preAPI hook (https://supertokens.com/docs/thirdparty/advanced-customizations/frontend-hooks/pre-api) to add that extra info (if it's a student or teacher) in the request body when the 
action === "THIRD_PARTY_SIGN_IN_UP"
. You can read this value from the localstorage you had set earlier.
Then on the backend, you want to override the API (https://supertokens.com/docs/thirdparty/advanced-customizations/apis-override/usage) 
signInUpPOST
function to read that custom field from the request object and can add it to the user metadata in case the sign in / up was successful.
This is a good question - if you ask it on stackoverflow as well, i can answer in more detail and it would be helpful for everyone in the future too đŸ™‚
d
Thank you so much
hello rishabh, when i try to embed the login form in typescript as mentioned in the docs, why do i get the error Error: No instance of ThirdParty found. Make sure to call the ThirdParty.init method.See https://supertokens.io/docs/thirdparty/quick-setup/frontend If you are trying to use this method doing server-side-rendering, please make sure you move this method inside a componentDidMount method or useEffect hook.
r
if you are using nextjs, make sure to wrap those components in the next js' dynamic HOC tp disable them on server side rendering
d
after i import the SignInAndUp component like so
Copy code
import type { NextPage } from 'next'
import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdparty'
import dynamic from 'next/dynamic'
const Student: NextPage = () => {
    return (
        <div>
            <SignInAndUp/>
        </div>
    )
}
export default Student
how to i wrap in in the dynamic HOC
r
d
okay i have tried it, got no errors, but it shows a blank screen.
r
can you show me your code?
and have you enabled JS on the browser?
d
Copy code
import React, { useEffect } from 'react'
import dynamic from 'next/dynamic'
import SuperTokens from 'supertokens-auth-react'

const SuperTokensComponentNoSSR = dynamic(
  new Promise((res) => res(SuperTokens.getRoutingComponent)) as any,
  { ssr: false }
)
export default function Auth() {
  return (
      <SuperTokensComponentNoSSR />
  )
}
and yes i have enabled js on my browser
r
You need to use SignInAndUp
Copy code
const SignInAndUpNoSSR = dynamic(
  new Promise((res) => res(SignInAndUp)) as any,
  { ssr: false }
)
export default function Auth() {
  return (
      <SignInAndUpNoSSR />
  )
}
d
ah okay
hi, how to i get the url from 
getOAuthAuthorisationURL
? my current implementation is
Copy code
override:{
          functions: (originalImplementation: ThirdPartyReact.UserInput)=>{
            return{
              ...originalImplementation, 
              getOAuthAuthorisationURL: function (e){
                console.log(e)
              }}
          }
        }
r
Hey @duta
What are you trying to do?
d
Im trying to get the oauth authorization url in the frontend overrides like u suggested here
r
Ah right. So you want to get the current URL from the window object. And then based on that, store a value in localstorage
And then call return await originalImplementation.getOAuth…
d
oh okay ill try that
originalImplementation.getOAuth... doesnt exist in the intellisense. im not sure im doing it right
r
Remove the type that you have added
d
ah okay that worked
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