Integrating client with provider using ory-hydra?

[StefanVrecic]

Don't understand how to tie in oidc client with provider?

Have followed the 5 min tutorial and implemented a provider, so I can login/logout/consent and get the tokens at redirect.

Now I want to tie it in with a demo client, let's say puppywebsite.io

Then I want to log into puppywebsite.io ... But in 5 min tutorial flow goes through 'http://127.0.0.1:5555/' which calls 'http://127.0.0.1:4444/oauth2/auth?audience=&client_id=auth-code-[...]&max_age=0&nonce=[..]&prompt=&redirect_uri=http%3A%2F%2F127.0.0.1%3A5555%2Fcallback&response_type=code&scope=openid+offline&state=[...]'

I have tried calling this public API (127.0.0.1:4444) , and generating my own state and nonce, but I get the error that the states do not match. Also the API documentation recommends against calling this directly.

So I figured, maybe I can embed the 'Welcome to the exemplary OAuth 2.0 Consumer!' screen as an iFrame. Not exactly what I want but it could work... However then I need to make some adjustments to CSRF and or cookies.

(Currently I am getting this screen in Firefox 'The request is not allowed. No CSRF value available in the session cookie.' ) and no login_challenge stored in cookies in backend session. Reading some of these issues, I may have to set sameSite to none and secure to true, but setting secure; true in express-session doesn't let Hydra work as it takes me to /undefined.

Just wondering if I am going down the correct path or if I am mapping this out incorrectly? What are my options for integrating this?
Thank you.

[vinckr]

Hey @StefanVrecic
have you seen the Run your own OAuth2 Server article, it may be of help.
Or are you asking more about how to implement the login user interface?
Maybe the CSRF Pitfalls doc can also help.

[vinckr]

Hey @StefanVrecic , just checking in if your question was answered.
I will mark this as answered for now, but feel free to come back to the discussion any time.
Thanks a ton 🐝

[dlaraf]

Your issue is that you're using a different state and nonce params created on the example go/backend. If you wants to use your own UI you have to implement this code on your side:

hydra/cmd/cmd_perform_authorization_code.go

Lines 223 to 234 in 4d8622f

	if r.URL.Query().Get("state") != string(state) {
	_, _ = fmt.Fprintf(os.Stderr, "States do not match. Expected %s, got %s\n", string(state), r.URL.Query().Get("state"))
	w.WriteHeader(http.StatusInternalServerError)
	_ = tokenUserError.Execute(w, &ed{
	Name: "States do not match",
	Description: "Expected state " + string(state) + " but got " + r.URL.Query().Get("state"),
	})
	onDone()
	return
	}

https://github.com/ory/release-canary/blob/5ca623671f35589c7e87070f0e7b269576c90fb8/test/e2e/oauth2-client/src/index.js#L273-L290