Thinking : Social Login in From Node

[JulienDelRio]

Hi,

Good news today in 1.12.0 : Release [email protected] · n8n-io/n8n · GitHub : n8n Form Trigger Node: New node

It’s a very good news for workflows with user interactions.

The next improvement is a way to identify the user.

My idea is to use Social Login to identify the user and adapt the workflow to him.

How can we do that ?

My first idea is to use Firebase Authentication.
It’s compatible with sign in from Google, Apple, Facebook, Twitter, Github for the basic version, and any OpenId Connect service with Identity Platform.

Another solution is to use javascript/typescript client like GitHub - authts/oidc-client-ts: OpenID Connect (OIDC) and OAuth2 protocol support for browser-based JavaScript applications
But I haven’t study it for now.

In my idea, I can get an api token with this system and use it in the flowing nodes in the workflow ?

What do you think about this idea ?
Do you see a way to implement it ?

sorry for my english

[Jon]

Hey @JulienDelRio,

I think there are other options that could be added as well like being able to respond to the users input rather than it being just for “collection”.

In theory you could use the form trigger community node which has more options available like custom html forms and responses which may allow part of this but it isn’t as clean.

It sounds like you are probably after more of a complete lowcode / nocode front end / app builder for your n8n workflows.

[JulienDelRio]

Il will make a test with a fake workflow and go back here to share the workflow.

[JulienDelRio]

A friend of mine made a solution with open id connect : Please Open It Blog

[Jon]

That looks similar to a workflow I was using in the past, Nice work.

[Mathieu_Passenaud]

Hi everyone, the workflow has been published :

Authenticate a user in a workflow with openid connect | n8n workflow template

Thanks to n8n team !

[JulienDelRio]

I worked with Mathieu today.

I have a workflow to animate a workshop at my job “Simple login with Open ID Connect” to test MFA with my colleague !!!

Mathieu should publish a v2.

[Oleksandr_Borniak]

Hello Mathieu,
Have you tried OKTA instead of Keycloak?
I tried, but it didn’t work for me.
https://help.okta.com/en-us/content/topics/apps/apps_app_integration_wizard_oidc.htm

[Mathieu_Passenaud]

Hi,
Our flow is not dedicated to Keycloak, it uses auth_code (with or without PKCE). We tested it with Keycloak and Google, not okta for now but it should work because there is no specific APIs/Uses in okta.
What is the configuration you put and the error you have ?

[Oleksandr_Borniak]

n8n webhook URL: https://MY_DOMAIN/webhook/production-webhook

OKTA APP configuration:

Okta Application after pressing the Save button:

n8n “Set variables : auth, token, userinfo, client id, scope” configuration:
auth_endpoint: https://company-name.okta-emea.com/oauth2/v1/authorize
token_endpoint: https://company-name.okta-emea.com/oauth2/v1/token
userinfo_endpoint: https://company-name.okta-emea.com/v1/userinfo
client_id: XXXXXXXXXXXXXXXXXX0i7 (value from OKTA)
scope: openid
redirect_uri: https://n8n_production_webhook_url/webhook/production-webhook
client_secret: EMPTY (When I choose Single-Page Application, OKTA does not generate a secret.)

Other code without changes.
Activated workflow, go to the production webhook URL: https://n8n_production_webhook_url/webhook/production-webhook

URL shows https://n8n_production_webhook_url/webhook/production-webhook?error=invalid_request&error_description=The+authentication+request+has+an+invalid+%27state%27+parameter.

I also tried to choose a Web Application in OKTA, it generates client_secret, but it also does not work.

Okta has a free trial or free developer account.

Okta Developer

I would be extremely grateful if you could make a separate tutorial for OKTA.

[Mathieu_Passenaud]

Hi, I see that there is an issue about the “state” parameter. I’ll check

[Mathieu_Passenaud]

I updated the flow, can you try it ? should work now

[Oleksandr_Borniak]

I tried updated workflow and got another error “Error: Client authentication failed. Either the client or the client credentials are invalid. (invalid_client)”.

It might be I created new Application in OKTA with the wrong options.
I created OIDC - OpenID Connect → Web Application.

[Mathieu_Passenaud]

Hi,

If you use a web application (with client_id and client_secret), you should disable “PKCE”.

I recommend use a “single-page application” deployment with a PKCE.

Regards,

[Oleksandr_Borniak]

@Mathieu_Passenaud

single-page application

I tried configuring a “single-page application", but unfortunately it also does not work.
OKTA “single-page application":

n8n workflow:

Node “Set variables : auth, token, userinfo, client id, scope”:
auth_endpoint: https://okta_domain.com/oauth2/v1/authorize
token_endpoint: https://okta_domain.com/oauth2/v1/token
userinfo_endpoint: https://okta_domain.com/v1/userinfo
client_id: copied_from_okta_app
scope: opened
redirect_uri: https://production_webhook_domain/webhook/production-webhook
client_secret: EMPTY
PKCE: ENABLED

Test step:
Save the n8n workflow and activate, open production webhook URL in a new tab.
Result:
The authorization code is invalid or has expired. (invalid_grant) (in a loop)
First request:

(upload://ca4jhA0YdHMuzs8p2kAIpPbWyaA.png)
Second request (page auto-updated):

[Mathieu_Passenaud]

can you post a screenshot of the flow ? I think the loop is due to the bad “opened” instead of “openid” scope, if user info does not responds you are redirected to the login page

[Oleksandr_Borniak]

It looks like I just mistyped “opened” instead of “openid”. Double checked and the scope is set as “openid”.

[Oleksandr_Borniak]

I found a misconfiguration in my config.
I used the wrong userinfo_endpoint: https://okta_domain.com/v1/userinfo.
The correct one is https://okta_domain.com/v1/userinfo.
This information is available using the https://okta_domain.com/.well-known/openid-configuration endpoint.
I also disabled Keep Only Set option.

Execution looks like this now:

But “userinfo” endpoint returns only “sub”:

[Mathieu_Passenaud]

Hi,

I found your issue. The scope “openid” from okta does not returns an email for the user.

You have two solutions :

• in the node “IF user info ok”, change “{{ $json.email }}” to “{{ $json.sub }}” and you will have only the user id
• add “email” scope in your configuration, so just put “openid email” in the field.

Regards,

[Oleksandr_Borniak]

@Mathieu_Passenaud

openid email

It finally works.
Thank you a lot, Mathieu.