Rails 7 connect to Twitter API strict-origin-when-cross-origin error - twitter-oauth

Question

Context: attempting to connect to twitter API Oauth2 version, after submitting twice, both with and without the following block initializers/content_security_policy.rb
Rails.application.configure do
config.content_security_policy do |policy|
policy.default_src :self, :https
policy.font_src :self, :https, :data
policy.img_src :self, :https, :data
policy.object_src :none
policy.script_src :self, :https
policy.style_src :self, :https
# # Specify URI for violation reports
# # policy.report_uri "/csp-violation-report-endpoint"
end
end
via the following rendered rails code to HTML form
<%= form_tag('/auth/twitter2', method: 'post', data: {turbo: false}) do %>
<button type='submit'>Login with Twitter</button>
<% end %>
<form data-turbo="false" action="/auth/twitter2" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="mU-GNjvKcWumrWZME_EszVTvi5wxo_5si89wOyCzCM0_SOmjAWQp1Vb8Gey71T1vCkRE9hahDd7r5zLpip1d_A" autocomplete="off">
<button type="submit">Login with Twitter</button>
</form>
The same was attempted with both a localhost:3000 host and an ngrok.io host
The console for the browser complains with the data at bottom.
Notes:
• the client ID is correct as set in the credentials
• the redirect_url has a slash removed from the string, yet it is present in the Twitter developer console https://https://170-343e-5-92-35.eu.ngrok.io/auth/twitter2/callback.eu.ngrok.io/auth/twitter2/callback
• twitter seems to recognize an active user x-twitter-active-user
It appears the API recognizes user but returns an error for lack of a security policy.
Yet something is wrong / missing here. What is it?
gems used are:
gem "omniauth", "~> 2.1"
gem "omniauth-rails_csrf_protection", "~> 1.0"
gem "omniauth-twitter2", "~> 0.1.0"
XHR GET https://twitter.com/i/api/2/oauth2/authorize?code_challenge=VqpkyR0-V1CTxnWXCdv0GCN_YP0fxX4JG0CggNxzDlo&code_challenge_method=S256&client_id=QkNaZGYxdXV2VVBteUhOZnZDZmQ6MTpjaQ&redirect_uri=https://170-343e-5-92-35.eu.ngrok.ioauth/twitter2/callback&response_type=code&scope=tweet.read users.read&state=274c1aa25c3274500095c77115cb4acc246fb9615e82f81a
[HTTP/2 400 Bad Request 187ms]
GET
scheme
https
host
twitter.com
filename
/i/api/2/oauth2/authorize
code_challenge
VqpkyR0-V1CTxnWXCdv0GCN_YP0fxX4JG0CggNxzDlo
code_challenge_method
S256
client_id
XV2VhQkNaZGYxdOZVBteUnZDZmQ6MTpjaQ
redirect_uri
https://170-343e-5-92-35.eu.ngrok.ioauth/twitter2/callback
response_type
code
scope
tweet.read users.read
state
274c1aa25c3274500095c77115cb4acc246fb9615e82f81a
Address
104.244.42.129:443
Status
400
Bad Request
Version HTTP/2
Transferred 706 B (132 B size)
Referrer Policy strict-origin-when-cross-origin
cache-control
no-cache, no-store, max-age=0
content-disposition
attachment; filename=json.json
content-encoding
gzip
content-length
128
content-type
application/json;charset=UTF-8
date
Mon, 31 Oct 2022 13:20:46 GMT
perf
7626143928
server
tsa_o
strict-transport-security
max-age=631138519
x-connection-hash
97ae1535e53b9ac87a0e6dc13996c3433bbbbaa470309893496090c60964af9d
x-content-type-options
nosniff
X-Firefox-Spdy
h2
x-frame-options
SAMEORIGIN
x-response-time
137
x-transaction-id
51c8c8c80424d52b
x-xss-protection
0
Accept
*/*
Accept-Encoding
gzip, deflate, br
Accept-Language
en-US,en;q=0.5
authorization
Bearer AAAAAAAAAAAAAAAAAAAAANRILgH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhAAAAAAnNwIzUejRCOuLTvJu4FA33AGWWjCpTnA
Connection
keep-alive
Cookie
guest_id=v1%3A165780214435378276; ct0=4020832aeed06194a4a62c8e5cc444311104716913ea7dcd10c30bb3dccfc87204d0ecf06771c5be6912634af55dd73edef992ae81eb79b1f507c8a79a50723aa018762a63ce9bca4aac58de0c35aedf; d_prefs=MjoxLGNvbnNlbnRfdmVyc2lvbjoyLHRleHRfdmVyc2lvbjoxMDAw; kdt=IZm9EbuU31Z5S5qEyVo0YPtSiIgF8djIWpHREbzq; twid=u%3D829665148143022080; auth_token=615b92f058b05ed8cd8829494d9421c5bb35a34a; night_mode=2; eu_cn=1; _twitter_sess=BAh7CyIKZmxhc2hJQzonQWN0aW9uQ29udHJvbGxlcjo6Rmxhc2g6OkZsYXNo%250ASGFzaHsABjoKQHVzZWR7ADoPY3JlYXRlZF9hdGwrCPgH%252FvyBAToMY3NyZl9p%250AZCIlYmQ2YjVhYWNkYTYyZTQyYjI1YjEzNzkwYWM0MThmNWE6B2lkIiUyMjg0%250AZWZkZDMzZjcwMGU2NjVmMjhmNDY4Yzc3ZGI4NjofbGFzdF9wYXNzd29yZF9j%250Ab25maXJtYXRpb24iFTE2NjcyMDY2MjM0ODkwMDA6HnBhc3N3b3JkX2NvbmZp%250Acm1hdGlvbl91aWQiFzgyOTY2NTE0ODE0MzAyMjA4MA%253D%253D--bf686a94467ee3b422f132c9b1b181de4480d7e6; des_opt_in=N
DNT
1
Host
twitter.com
Referer
https://twitter.com/i/oauth2/authorize?client_id=QkNaZGYxdXV2VVBteUhOZnZDZmQ6MTpjaQ&code_challenge=VqpkyR0-V1CTxnWXCdv0GCN_YP0fxX4JG0CggNxzDlo&code_challenge_method=S256&redirect_uri=https%3A%2F%2F170-343e-5-92-35.eu.ngrok.ioauth%2Ftwitter2%2Fcallback&response_type=code&scope=tweet.read+users.read&state=274c1aa25c3274500095c77115cb4acc246fb9615e82f81a
Sec-Fetch-Dest
empty
Sec-Fetch-Mode
cors
Sec-Fetch-Site
same-origin
TE
trailers
User-Agent
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:106.0) Gecko/20100101 Firefox/106.0
x-csrf-token
4020832aeed06194a4a62c8e5cc444311104716913ea7dcd10c30bb3dccfc87204d0ecf06771c5be6912634af55dd73edef992ae81eb79b1f507c8a79a50723aa018762a63ce9bca4aac58de0c35aedf
x-twitter-active-user
yes
x-twitter-auth-type
OAuth2Session
x-twitter-client-language
en

Answer 1

There was another gem involved: Devise
Although config/initializers/devise.rb did not include any references to
config.omniauth :twitter2 it still conflicted with the omniauth gem.
Removing omniauth was necessary, in addition to configuring the devise initializer, to properly connect with twitter provider (exactly twitter2 for OAuth 2.0 connections).