How to integrate SAML Jackson using custom UI in frontend us

Question

How to integrate SAML Jackson using custom UI in frontend using supertoken web js it would be great if there is any example

rp · Answer

hey < shrey07> You can follow the docs for the integrating with google sign in using web js it s the same thing with SAML as well

rp · Answer

are you planning on having different tenants

shrey07 · Answer

yes that also might come in future

rp · Answer

right So multi tenancy is a paid feature I d be happy to walk you through this setup with web js over a call since we don t have any docs for it

rp · Answer

you can pick a time you like here https supertokens com call user

shrey07 · Answer

I have a few doubts while using the google sign in using web js what will be the provider Id for SAML will it depend on the service we are using for SAML

rp · Answer

no Provider ID will be the same thing that you configure on the backend for SAML the `id` field on the backend s custom provider config

shrey07 · Answer

Okay Understood and URL will also be based on API endpoint correct

rp · Answer

yes Just like in case of google

shrey07 · Answer

Okay understood Thanks

shrey07 · Answer

< rp> I have added CORS and added redirect url in mock saml metadata xml as well but still getting not valid redirect URL

rp · Answer

Right How have you configured SAML Have you created a tenant in there

shrey07 · Answer

I did as per the documentation https supertokens com docs thirdpartyemailpassword common customizations saml with boxyhq integration steps

rp · Answer

right So I assume that you ran the curl command to create a new tenant in boxy hq

rp · Answer

in that case what `redirectUrl` and what `defaultRedirectUrl` did you use

shrey07 · Answer

I have used front end s localhost URL e g http localhost 3000

rp · Answer

can you tell me the exact value that you used And can you paste the full URL thats returned from the getAuthorisationUrl function

shrey07 · Answer

this is the URL I am getting http localhost 5225 api oauth authorize client id=06cb0be8cc578b59e363e8054319c25c4e03115d state=348c005701f95f3604f0d redirect uri=http 3A 2F 2Flocalhost 3A3000 2F

rp · Answer

shouldnt the redirect uri be localhost 3000 auth callback <id>

rp · Answer

like for google it is localhost 3000 auth callback google

shrey07 · Answer

Tried with this http localhost 3000 auth callback saml jackson but same result http localhost 5225 api oauth authorize client id=06cb0be8cc578b59e363e8054319c25c4e03115d state=aa0b26285d19d98f06875 redirect uri=http 3A 2F 2Flocalhost 3A3000 2Fauth 2Fcallback 2Fsaml jackson

rp · Answer

can i see the curl command that you had given to SAML server

rp · Answer

this seems fine now Im not sure why it s not allowing it

rp · Answer

Have you added the right client id and secret on the backend

rp · Answer

the result of the curl command

shrey07 · Answer

yeah

shrey07 · Answer

Let me generate it again and check

rp · Answer

ok

shrey07 · Answer

now this login screen came but after clicking on login Redirect URL is not allowed

rp · Answer

can i see all the things you have done The curl command the backend custom provider the frontend function calls

rp · Answer

probably some silly mistake somewhere

shrey07 · Answer

sure

shrey07 · Answer

F E

shrey07 · Answer

BE

shrey07 · Answer

SAML Jackson

rp · Answer

ok thanks < sattvikc> can help here

sattvikc · Answer

lemme check in a moment

sattvikc · Answer

could you make redirectUrl and defaultRedirect url same and try again

sattvikc · Answer

it should point to localhost 3000 auth callback saml jackson

shrey07 · Answer

So if i change in sh file do I have to kill the docker container and run it again

sattvikc · Answer

no need to restart the container

shrey07 · Answer

Okay

shrey07 · Answer

same

sattvikc · Answer

how did u create the encodedRawMetadata

shrey07 · Answer

I converted xml to base64

sattvikc · Answer

did u download a new metadata

shrey07 · Answer

yes

sattvikc · Answer

from mocksaml com

shrey07 · Answer

yeah

sattvikc · Answer

give me a little while let me try it out and get back

shrey07 · Answer

Okay sure

shrey07 · Answer

Thanks

sattvikc · Answer

can u share the command u used to start the boxy container

shrey07 · Answer

downloaded the repo npm run dev addTenant sh xyz com

shrey07 · Answer

above steps I did to start SAML Container

sattvikc · Answer

ok so u r running the npm version of the boxy

shrey07 · Answer

yes

sattvikc · Answer

I just tried from the repo everything works out of the box shall we get on a call to investigate this

shrey07 · Answer

I am using this repo https github com supertokens jackson supertokens express for SAML

sattvikc · Answer

yep that s what I tried

shrey07 · Answer

ohh okay

sattvikc · Answer

can take a look at it over a call it will be a bit easier

shrey07 · Answer

okay

sattvikc · Answer

3 15pm IST works for u

shrey07 · Answer

Can we connect after 4

sattvikc · Answer

sure

shrey07 · Answer

can we connect

sattvikc · Answer

yea sure

sattvikc · Answer

To join the video meeting click this link https meet google com woe rjuw tcn

shrey07 · Answer

Hi < sattvikc> After successful configuration to SAML Jackson while I am calling ThirdPartyEmailPassword thirdPartySignInAndUp from the callback route I am getting the error mentioned in the ss let me know If I am missing anything here

sattvikc · Answer

do you see state value on the callback URL

shrey07 · Answer

yeah I am getting the code

sattvikc · Answer

what about `state`

shrey07 · Answer

http localhost 9000 auth callback saml sso code=72ea4332ba34e578509753df6441c525fea74a32 state=c9d157d06823f3f1afc55

shrey07 · Answer

yeah state is also there

sattvikc · Answer

can u inspect the localstorage and see if u have the state object

shrey07 · Answer

lmc

shrey07 · Answer

local storage is blank

sattvikc · Answer

is there any change in the way you do the login redirect

sattvikc · Answer

seems like u may not have called getAuthURLAndSetState

shrey07 · Answer

okay where should I call it before signupin API

sattvikc · Answer

no

sattvikc · Answer

it s needs to be called in the handle SignIn clicked

sattvikc · Answer

I think you had automatic redirect right

sattvikc · Answer

can you show me your frontend code where you do the redirect part

sattvikc · Answer

SignInUp is fine

shrey07 · Answer

sure just a moment

shrey07 · Answer

Hey < sattvikc> things are working fine now some jackson URL issue was there Thanks

sattvikc · Answer

oh great

paras · Answer

< shrey07> Is you SAML integration working fine

paras · Answer

I tried and getting some errors < rp>

rp · Answer

are you using yarn or npm version <= 7

paras · Answer

npm 9 3 1

rp · Answer

< porcellus> can help here

paras · Answer

using the sample app to check the integration feature

porcellus · Answer

hi which example app is this

paras · Answer

https supertokens com docs thirdpartyemailpassword common customizations saml with boxyhq integration steps

porcellus · Answer

right so you completed the quick setup of the frontend right

porcellus · Answer

what was is the output of `npm i supertokens auth react`

paras · Answer

I wen t through that also and made created an app but this one is independent app i e sample app

paras · Answer

The two npm commands for BE and BE ran successfully

porcellus · Answer

right so you are not installing yourself but running them via docker

porcellus · Answer

or which npm commands are you talking about

paras · Answer

npm i s supertokens auth react

paras · Answer

yeah via docker I used the command npm run dev I followed the README file

porcellus · Answer

ah I see the guide never mentions installing supertokens auth react though

porcellus · Answer

I m checking this out but this may have caused an update that s not compatible with the old version of npm and node used in the docker images

paras · Answer

yeah I mentioned auth react and node too

paras · Answer

okkh please let me know how to resolve this one

porcellus · Answer

I think the quickest thing is if you revert changes to all of the `package json` remove `package lock json` files and re build the containers

porcellus · Answer

also remove the node modules

paras · Answer

I deleted the repo itself and cloned it again but still the issue persists

porcellus · Answer

so the process was 1 clone the example repo 2 run `npm run dev` `yarn dev` nothing between

porcellus · Answer

can you maybe post a log I did just those steps and it seemed to be working for me

paras · Answer

okk giving it a try again

paras · Answer

< porcellus> Thanks it worked