fenichelar/ember-simple-auth-token

Ember Octane Question

atuldhanorker opened this issue · 4 comments

Can someone guide me how to use ember-simple-auth-token with Ember octane?

Can you be more specific? What are you having trouble with?

The authenticate function is not passing username and password. I am able to pass the credential using oauth2 authenticator but not with jwt or token authenticator. Below is a snippet of my login component.

`//login.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class LoginComponent extends Component {
@Tracked errorMessage;
@service session;

@action
async authenticate() {
let { identification, password } = this;
try {
await this.session.authenticate('authenticator:token', identification, password);
} catch(error) {
this.errorMessage = error.error || error;
}

if (this.session.isAuthenticated) {
  // Transition to protected route
}

}
}`

`//login.hbs

Sign in to your account

Email address
    <div class="mt-6">
      <label for="password" class="block text-sm font-medium leading-5 text-gray-700">
        Password
      </label>
      <div class="mt-1 rounded-md shadow-sm">
        <Input id="password" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" @value={{this.password}}/>
      </div>
    </div>

    <div class="mt-6 flex items-center justify-between">


      <div class="text-sm leading-5">
        <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
          Forgot your password?
        </a>
      </div>
    </div>

    <div class="mt-6">
      <span class="block w-full rounded-md shadow-sm">
        <button type="submit" {{on "click" this.authenticate}} class="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
          Sign in
        </button>
      </span>
    </div>
  </form>


</div>
`

you need to pass it as a mapping e.g.:

await this.session.authenticate('authenticator:token', { identification, password });

Thanks this is very helpful.