Not working with Jetpack Single Sign-on

[dartiss]

Having activated the Jetpack single sign-on and signing out, I was prompted to login in via WordPress.com or use my standard login. I chose the latter and selected my standard sign-in. However, where I should be able to enter my two factor code (via Google Authenticator) I was presented with a blank grey box which I couldn't input into. Instead I chose my backup method (email) and was able to gain entry that way.

Let me know if you need to know anything more about this.

[kraftbj]

Duplicate of Automattic/jetpack#3747

It did work, but some changes on our end is messing up the layout there. If you remove the jetpack-sso body class, it'll display the 2fa entry form or if you chose an alternative method, it'll work too.

[dartiss]

Thanks @kraftbj, I'll keep an eye on this over on the Jetpack issue log too.

[swissspidy]

Duplicate of #84?

[kraftbj]

@swissspidy No, different issue.

[DaddyMadu]

same issue with jetpack sso, but i can choose login with backup keys and again choose login with TOTP at that time i can enter the code and sign in normally, hope it helped

[KZeni]

I also experienced the issue where the Two-Factor plugin's Authenticator Code label & input on the login form are hidden by Jetpack's CSS.

It appears the p element within the form which contains the Authenticator code label & input is hidden due to Jetpack SSO CSS hiding the p element since it has the Jetpack SSO CSS being applied to the page (simply disabling the display:none; style on the .jetpack-sso-form-display #loginform > p, .jetpack-sso-form-display #loginform > div rule for the Two-Factor login form elements shows the label & input without issue).

As an aside, this is also mentioned on the WP.org support forum at https://wordpress.org/support/topic/not-working-with-jetpack-single-sign-on/

[kasparsd]

Thanks for the additional details on the issue @KZeni! This sounds like an easy CSS fix on our side.

[KZeni]

Couldn't two-factor/providers/class.two-factor-totp.php simply have:

<p>
	<label for="authcode"><?php esc_html_e( 'Authentication Code:', 'two-factor' ); ?></label>
	<input type="tel" name="authcode" id="authcode" class="input" value="" size="20" pattern="[0-9]*" />
</p>

replaced with:

<label for="authcode"><?php esc_html_e( 'Authentication Code:', 'two-factor' ); ?></label>
<input type="tel" name="authcode" id="authcode" class="input" value="" size="20" pattern="[0-9]*" />

Seems like that has effectively no visual difference while preventing the Jetpack SSO CSS from hiding the elements.

Otherwise, I'd imagine you could also just have that code snippet replaced with:

<p style="display:block;">
	<label for="authcode"><?php esc_html_e( 'Authentication Code:', 'two-factor' ); ?></label>
	<input type="tel" name="authcode" id="authcode" class="input" value="" size="20" pattern="[0-9]*" />
</p>

so you can keep the <p> element wrapper while preventing the CSS conflict.

However, the submit_button being called is still wrapped in a <div> which the Jetpack SSO CSS also hides. So that should be addressed as well, ideally, as the code above does not fix that.

[KZeni]

Hmm... one other option (maybe better than my past options) would be to edit two-factor/class.two-factor-core.php where is already has inline CSS for the login form at:

<style>
/* @todo: migrate to an external stylesheet. */
.backup-methods-wrap {
	margin-top: 16px;
	padding: 0 24px;
}
.backup-methods-wrap a {
	color: #999;
	text-decoration: none;
}
ul.backup-methods {
	display: none;
	padding-left: 1.5em;
}
</style>

which could simply be updated to be:

<style>
/* @todo: migrate to an external stylesheet. */
.jetpack-sso-form-display #login #loginform p,.jetpack-sso-form-display #login #loginform div {
	display:block;
}
.backup-methods-wrap {
	margin-top: 16px;
	padding: 0 24px;
}
.backup-methods-wrap a {
	color: #999;
	text-decoration: none;
}
ul.backup-methods {
	display: none;
	padding-left: 1.5em;
}
</style>

That way the existing markup & other code remains the same and the fix for both the label + input and submit button being hidden is consolidated to one location.

[djibux]

I'm experiencing the same issue. For now I use @MohamadHegazy's trick and it works: click on the bottom link to switch to "Backup Verification Codes" then switch back to "One-time passwords".

[kasparsd]

Thanks for the suggested fix @KZeni!

Could you please try the suggested fix:
https://github.com/georgestephanis/two-factor/pull/196/files