I keep getting this error and I’m not sure what to do. I wrote the custom sign in in typescript and a bit lost.
Would anyone be able to point me in the right direction?
import React, { useState, useCallback } from 'react';
import { OktaAuth } from '@okta/okta-auth-js';
import { useOktaAuth } from '@okta/okta-react';
import { createUseStyles } from 'react-jss';
import Input from '../common/Input';
import Button from '../common/Button';
import LinkButton from '../common/LinkButton';
import FormBox from '../common/FormBox';
import { HOME } from '../../constants/routes';
import config from '../../utils/config'
const useStyles = createUseStyles({
page: {
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
paddingTop: 100,
paddingBottom: 200,
},
signUp: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
link: {
color: 'rgb(125, 0, 76)',
marginLeft: 5,
}
});
function SignIn({ issuer }:{[key:string]:any}) {
const classes = useStyles();
const { authService }:{[key:string]:any} = useOktaAuth();
const [sessionToken, setSessionToken] = useState<string | undefined>('')
const [email, setEmail] = useState<string | undefined>('');
const [password, setPassword] = useState<string | undefined>('');
const handleSubmit = (e:{[key:string]:any}) => {
e.preventDefault();
const oktaAuth = new OktaAuth({
// If your app is configured to use the Implicit Flow
// instead of the Authorization Code with Proof of Code Key Exchange (PKCE)
// you will need to uncomment the below line:
// pkce: false,
issuer: issuer
});
oktaAuth.signIn({ email, password })
.then(res => {
const sessionToken = res.sessionToken;
setSessionToken(sessionToken);
// sessionToken is a one-use token, so make sure this is only called once
authService.redirect({ sessionToken });
})
.catch(err => console.log('Found an error', err));
};
const handleEmailChange = (e:{[key:string]:any}) => {
setEmail(e.target.value);
};
const handlePasswordChange = (e:{[key:string]:any}) => {
setPassword(e.target.value);
};
if (sessionToken) {
// Hide form while sessionToken is converted into id/access tokens
return null;
}
return (
<div className={classes.page}>
<FormBox title="Sign In" onSubmit={handleSubmit}>
<Input
type="email"
placeholder="Email address"
value={email}
onChange={(value?: string) => setEmail(value)} required/>
<Input
type="password"
placeholder="Password"
value={password}
minLength={5}
onChange={(value?: string) => setPassword(value)} required/>
<LinkButton text="Forgot Password?" to={HOME} bold/>
<Button text="Log In" onClick={() => {}} />
<div className={classes.signUp}>
<p>Not a member?</p>
<a href="/signup" className={classes.link}>Sign up</a>
</div>
</FormBox>
</div>
);
}
export default SignIn;