Getting AuthSdkError: No issuer passed to constructor. Required

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;

Are you providing a value for “issuer”?

The error you are seeing seems to imply that this value has not been set in your config. Depending on your use case, the issuer should either be your Okta org domain, https://org.okta.com (or a custom URL domain), or a custom authorization server, such as https://org.okta.com/oauth2/default.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.