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
<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.