Hi All! I'm currently trying to implement a custom UI for SuperTokens. I set up API requests for sign up and sign in. However, I'm unsure how to get the onHandleEvent stuff to work with a custom UI. I'm trying to add a second step to the authentication. On successful signup using the thirdpartyemailpassword recipe, I want to redirect to another screen where I can set a username. Is there any guide to implement a custom ui without loosing features like email verification?

Hi, What part about onHandleEvent didnt work for you? If you are using

supertokens-auth-react

then the event firing should work out of the box

In my

_app.tsx

I'm doing this:

`
if (typeof window !== 'undefined') {
  // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
  SuperTokens.init({
    appInfo: {
      // learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo
      appName: process.env.NEXT_PUBLIC_SUPERTOKENS_APP_NAME as string,
      apiDomain: process.env.NEXT_PUBLIC_SUPERTOKENS_API_DOMAIN as string,
      websiteDomain: process.env.NEXT_PUBLIC_SUPERTOKENS_WEB_DOMAIN as string,
      apiBasePath: process.env.NEXT_PUBLIC_SUPERTOKENS_API_BASE_PATH,
      websiteBasePath: process.env.NEXT_PUBLIC_SUPERTOKENS_WEB_BASE_PATH,
    },
    recipeList: [
      ThirdPartyEmailPassword.init({
        signInAndUpFeature: {
          providers: [Google.init(), Facebook.init()],
        },
        getRedirectionURL: async (context) => {
          if (context.action === 'SUCCESS') {
            if (context.redirectToPath !== undefined) {
              // we are navigating back to where the user was before they authenticated
              return context.redirectToPath
            }
            return '/dashboard'
          }
          return undefined
        },
        onHandleEvent: async (context) => {
          if (context.action === 'SESSION_ALREADY_EXISTS') {
            // TODO:
          } else if (context.action === 'SUCCESS') {
            const { id, email } = context.user
            if (context.isNewUser) {
              // TODO: Sign up
              console.log('redirect to username setter')
            } else {
              // TODO: Sign in
              console.log('User signed in :D')
            }
            console.log(id, email)
          }
        },
      }),
      Session.init(),
    ],
  })
}

However there is no output in the console...

And can I see your UI code? The part where you are triggering SuperTokens functions etc after which you are expecting the onHandleEvent to be called?

Yes sure

Right, what version of

supertokens-auth-react

are you using?

you are making APi calls youself using axios

yes I am

our SDK won't know that that's happened and it won't be able to trigger the onHandleEvent callback

0.22.0

So you should see the API call response and redirect the user yourself

Right, is there anyway to trigger the api using the sdk?

You can use the functions exported by the SDK

Yea. Instead of making the API calls yourself using axios, you can use the helper functions like

ThirdPartyEmailPassword.emailPasswordSignIn

etc (see https://supertokens.com/docs/auth-react/modules/recipe_thirdpartyemailpassword.html#emailPasswordSignIn-1)

Perfect!

thank you!

Happy to help!

But I need to implement the redirection myself right?

Well, if you are using our SDK, it redirects to

/

be default. If you want to change it, you can see https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/redirecting-post-login

Okay thats what I thought. No problem tho

yea, with custom UI, we let you take care of all the redirections - since it's custom

Okay! Now I have a backend question regarding implementation of thirdparty signinup... I configured the frontend to first use the sdk to redirect to the thirdpartylogin. On successful redirection to my frontend I check if a code is present in the URL query parameters and then use the sdk to make the final request. My backend fails sometimes tho. I'm using GoLang + Fiber

whats the config you have set when you do facebook.init on the backend?

my config

which version of the golang SDK?

a

go get -u ./...

and a

go mod tidy

seemed to fix the issue

Hmm. Strange! Okay.

No! Actually it's a different issue...

Huh.. really. That’s odd

But only sometimes...

What do you mean by allowing anothe request?

I mean if I logged in then don't redirect to idk e.g. dashboard and then refresh the page (so another thirdpartySigninup is triggered) the backend crashes at well.

Right. That’s odd. Can we get on a debug call for this? Or you can open an issue about this highlighting details of the issue

Ye sure I'll contact you as soon as I'm home 😄

thank you!

All right, that's odd. It had something todo with the frontend. If I implemented the thirdpartySigninup on the frontend without the react useEffect hook and without checking that a code query parameter is actually present, the backend server was crashing sometimes... It happened because sometimes the code was undefined or there were to many requests with the same code. I think there could be a part missing to handle codes that have been already verified. I'm using GoLang + Fiber with the with-fiber example located here: https://github.com/supertokens/supertokens-golang/tree/master/examples/with-fiber

SuperTokens has no way of knowing if a code has already been verified or not. If you give it a missing code or a code that's already verified, the API will throw an error, but it shouldn't cause a server panic. Are you getting a server panic?

yes this one. But this results in a server crash!

ohhh. Can you open an issue about this? We will fix it

Yes sure!

thanks! Will fix

!!! Thank you!

What is the respnse of the API call in which you call

UpdateAccessTokenPayload

? Specifically, the response headers

sure 🙂

func SetUsername(c *fiber.Ctx) error {
    sessionContainer := session.GetSessionFromRequestContext(c.UserContext())
    if sessionContainer == nil {
        return c.Status(500).JSON("No session found :(")
    }

    userId := sessionContainer.GetUserID()
    db := database.DB

    user := new(model.User)

    err := c.BodyParser(user)
    if err != nil {
        return c.Status(500).JSON(fiber.Map{"status": "REVIEW_INPUT", "message": "Review your input", "data": err})
    }

    user.SuperTokensID = userId

    err = db.Create(&user).Error
    if err != nil {
        return c.Status(500).JSON(fiber.Map{"status": "CANT_SET_USERNAME", "message": "Couldn't set a username for user with id " + userId})
    }

    currAccessTokenPayload := sessionContainer.GetAccessTokenPayload()
    currAccessTokenPayload["username_set"] = true

    err = sessionContainer.UpdateAccessTokenPayload(currAccessTokenPayload)
    if err != nil {
        c.Status(500).JSON(fiber.Map{"status": "UPDATE_ACCESSTOKEN_FAILED", "message": "Couldn't update the access token payload for user with id " + userId})
    }

    fmt.Println(sessionContainer.GetAccessTokenPayload())

    return c.Status(200).JSON(fiber.Map{"status": "OK", "message": "Username successfuly set."})
}

Thats my handler... and this is my middleware :

func VerifySessionWithoutUsername(options *sessmodels.VerifySessionOptions) fiber.Handler {
    return func(c *fiber.Ctx) error {
        adaptor.HTTPHandler(session.VerifySession(options, func(w http.ResponseWriter, r *http.Request) {
            c.SetUserContext(r.Context())
        }))(c)

        if options != nil && !*options.SessionRequired {
            return c.Next()
        }

        sessionContainer := session.GetSessionFromRequestContext(c.UserContext())
        if sessionContainer != nil {
            return c.Next()
        } else {
            return c.Status(401).JSON("Please authorize yourself.")
        }
    }
}

Ok i think the middleware we have provided in the example app has a few mistakes in it. Will check and get back ASAP

Awesome man! Best support I ever had!

So, if we do this:

go
func verifySession(options *sessmodels.VerifySessionOptions) fiber.Handler {
    return func(c *fiber.Ctx) error {
        return adaptor.HTTPHandler(session.VerifySession(options, func(rw http.ResponseWriter, r *http.Request) {
            //setting up the verified session context from http request to the fiber context
            c.SetUserContext(r.Context())
            c.Next()
        }))(c)
    }
}

So this is the final middleware

not really. It still has some issues

oh okay but it should work for basic session verification and everything?

not yet. Still trying to figure it out

You are awesome dude!

hey @flixoflax Try this verifySession function:

go
func verifySession(options *sessmodels.VerifySessionOptions) fiber.Handler {
    return func(c *fiber.Ctx) error {
        var httpResponse http.ResponseWriter
        callbackCalled := false
        adaptor.HTTPHandler(session.VerifySession(options, func(rw http.ResponseWriter, r *http.Request) {
            callbackCalled = true
            httpResponse = rw
            //setting up the verified session context from http request to the fiber context
            c.SetUserContext(r.Context())
        }))(c)

        if options != nil && !*options.SessionRequired {
            err := c.Next()
            if err != nil {
                return err
            }
        }
        if callbackCalled {
            err := c.Next()
            if err != nil {
                return err
            }
            // the API may have modified the response headers, so we get that and set
            // it in the fiber context
            for key, valueArr := range httpResponse.Header() {
                valueStr := ""
                for i := 0; i < len(valueArr); i++ {
                    valueStr += valueArr[i]
                    if i < len(valueArr)-1 {
                        valueStr += ", "
                    }
                }
                c.Set(key, valueStr)
            }
        }
        return nil
    }
}

Oh shit! Thanks man!

@flixoflax the function below takes care of a few more edge cases:

go
func verifySession(options *sessmodels.VerifySessionOptions) fiber.Handler {
    return func(c *fiber.Ctx) error {
        return adaptor.HTTPHandlerFunc(http.HandlerFunc(session.VerifySession(options, func(rw http.ResponseWriter, r *http.Request) {
            c.SetUserContext(r.Context())
            err := c.Next()
            if err != nil {
                err = supertokens.ErrorHandler(err, r, rw)
                if err != nil {
                    rw.WriteHeader(500)
                    _, _ = rw.Write([]byte(err.Error()))
                }
                return
            }
            c.Response().Header.VisitAll(func(k, v []byte) {
                if string(k) == fasthttp.HeaderContentType {
                    rw.Header().Set(string(k), string(v))
                }
            })
            rw.WriteHeader(c.Response().StatusCode())
            _, _ = rw.Write(c.Response().Body())
        })))(c)
    }
}

Wow that’s perfect! Thanks for the fast and amazing support!

We will have a look at this sometime next weejk.

Great!

import Passwordless from 'supertokens-auth-react/recipe/passwordless'; import Session from 'supertokens-auth-react/recipe/session'; export const authConfig = () => ({ appInfo: { appName: process.env.NEXT_PUBLIC_APPNAME, apiDomain: process.env.NEXT_PUBLIC_APIDOMAIN, websiteDomain: process.env.NEXT_PUBLIC_DOMAIN, apiBasePath: process.env.NEXT_PUBLIC_APIPATH, websiteBasePath: process.env.NEXT_PUBLIC_PATH, }, recipeList: [ Passwordless.init({ useShadowDom: false, contactMethod: 'PHONE', signInUpFeature: { defaultCountry: 'IN', emailOrPhoneFormStyle: { button: { backgroundColor: 'rgba(65, 83, 240, 1)', border: '0px', width: '100%', margin: '0 auto', }, superTokensBranding: { display: 'none', }, headerTitle: { fontFamily: 'sans-serif', }, container: { height: '550px', display: 'flex', justifyContent: 'center', alignItems: 'center', }, }, }, getRedirectionURL: async (context) => { if (context.action === 'SUCCESS') { if (context.isNewUser) { // user signed up return '/wizard'; } // user signed in return '/profile'; } return undefined; }, }), Session.init(), ], });

Hey @sreehari_jayaraj did you checkout the react override component section?