React Custom Login Page only with Login Button

[psan]

Hi,

I’ve just started using Okta login with my React app however having issues with going to to actually authentication url.

So I have a page that contains a single Login button (no username or password fields).

When that is clicked I’d like the user to be taken to Okta’s default page and allow them to login as usual.

So I noticed I need to add onAuthRequired to my config which I’ve done like:

const oktaConfig = {
	clientId: "0xxxx6",
	issuer: "https://xxx.okta.com/oauth2/default",
	redirectUri: "http://localhost:3000/implicit/callback",
	scopes: ["openid", "profile", "email"],
	onAuthRequired: onAuthRequired,
	pkce: true
};

function onAuthRequired() {
	browserHistory.push('/login');
}

My routes look like this:

<Route path="/implicit/callback" component={ImplicitCallback} />
<Route path="/login" render={() => <LoginView baseUrl='/implicit/callback' />} />
<SecureRoute path="/" component={Dashboard} />

And the login button on the login page (which has a prop baseUrl) like this:

<Button href={baseUrl}>Go!</Button>

So basically, do I have to generate that URL that is passed or is there anyway to have it done for me.

If I have to generated how do I that?

Basically the URL that would have been presented if I didn’t have onAuthRequired

Any help appreciated.

And if it helps here are the URLs i have set in the dashboard:

[psan]

For anyone interested - this is what I did to get working:

function login(e: React.FormEvent) {
			e.preventDefault();

			const authClient = new OktaAuth({issuer: baseUrl});

			authClient
				.signIn({
					username: "xxx",
					password: "xxx",
				})
				.then(function(transaction: any) {
					if (transaction.status === "SUCCESS") {
						// This redirect method allows us to bypass Okta's default login page
						auth.redirect({sessionToken: transaction.sessionToken});
					} else {
						throw "We cannot handle the " + transaction.status + " status";
					}
				})
				.fail(function(err: any) {
					console.error(err);
				});
		}