/ app / login / controller.js
import Controller from '#ember/controller';
import { inject } from '#ember/service';
export default Controller.extend({
session: inject('session'),
actions: {
authenticate: function(){
// let _this = this;
let credentials = this.getProperties('identification','password');
let authenticator = 'authenticator:jwt';
this.get('session').authenticate(authenticator, credentials).catch((reason)=>{
// this.set('errorMessage', reason.error || reason);
this.set('errorMessage','Login Failed');
});
}
}
});
/app / profile / controller.js
import Controller from '#ember/controller';
import { inject } from '#ember/service';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Controller.extend(AuthenticatedRouteMixin, {
session: inject('session'),
});
/ config / environment.js
.....
ENV['ember-simple-auth'] = {
authorizer: 'authorizer:custom',
routeAfterAuthentication: '/profiles',
};
....
When I logged in with the necessary credentials it will route to the Profile Route and then when I refresh the page, the session expires,
Suggest a solution,
Related
Hi so I've been making an app using Django and Graphene for a GraphQL server that will be accessed by a React client using Apollo. I'm using graphql_jwt for authentication.
I have set up my GraphQL server and the client code to read the JWT but I've learned that localStorage is not safe enough and neither is a cookie. I managed to find a way to set an HTTPOnly cookie when making the tokenAuth request and the cookie persists and is functional in GraphiQL (localhost:8000).
I managed to do this with jwt_cookie decorator from graphql_jwt.decorators
from django.contrib import admin
from django.urls import path
from graphene_django.views import GraphQLView
from django.views.decorators.csrf import csrf_exempt
from graphql_jwt.decorators import jwt_cookie
urlpatterns = [
path('admin/', admin.site.urls),
path('graphql/', jwt_cookie(csrf_exempt(GraphQLView.as_view(graphiql=True))))
]
Unfortunately, when I call the tokenAuth endpoint from Apollo (localhost:3000) it is neither setting the cookie nor is can I access it from my afterware (makes sense now that I think about it). Neither the same-origin or include credentials work in the server HttpLink or the ApolloClient itself.
import {
ApolloClient,
gql,
ApolloProvider,
HttpLink,
from,
useQuery,
ApolloLink
} from '#apollo/client';
import { onError } from '#apollo/client/link/error';
import { setContext } from 'apollo-link-context';
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.forEach(({ message }) => {
console.log(message);
});
}
if (networkError) {
console.log(networkError.message)
}
});
const afterwareLink = new ApolloLink((operation, forward) => {
return forward(operation).map(response => {
const context = operation.getContext();
const { response: { headers } } = context;
console.log(headers);
return response;
});
});
const link = from([
errorLink,
setContext((operation) => {
console.log("HITTING SET CONTEXT");
// const token = localStorage.getItem('authToken');
const token = Cookies.get('authToken');
console.log(token);
return {
headers: {
Authorization: token ? `JWT ${token}` : ''
}
}
}),
afterwareLink,
new HttpLink({ uri: 'http://localhost:8000/graphql/' })
]);
const client = new ApolloClient({
link,
cache,
typeDefs,
credentials: 'include'
});
Please ignore the refreshToken and authToken values. I set them with the js-cookie package. But as you can see the Headers are empty and weren't set on login on the client but they were on the server.
QUESTION:
How do I pass the jwt response headers to the frontend?
SO I was able to resolve this. I posted my resolution on Github
https://github.com/flavors/django-graphql-jwt/issues/191
I'm using Ember 2.9 and would like to use the "paste" event.
How I can add paste as an customEvent on start up the application:
This is my current app.js:
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
I've setup a demo Ember.js 2.9 app at https://github.com/bartocc/stackoverflow-2176861 that demonstrates the code below.
Here's is an example app.js to configure the Ember.js to listen to the paste event:
// /app/app.js
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver,
// This is how you make your ember app listen the paste event
customEvents: {
paste: 'paste'
}
});
loadInitializers(App, config.modulePrefix);
export default App;
Find more information in the Ember.js 2.9 API.
Then, make any component listen to the paste event with:
import Ember from 'ember';
export default Ember.Component.extend({
paste(event) {
const text = event.originalEvent.clipboardData.getData('Text');
alert(`you've just pasted the text '${text}'`);
}
});
I'm certain its something small and stupid I'm missing but can't seem to get my fixtures to load. Here is I've got...
app/models/todos.js
import DS from 'ember-data';
var Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});
Todo.reopenClass({
FIXTURES: [
{
id: "1",
title: 'install ember-cli',
isCompleted: true
}, {
id: "2",
title: 'install additional dependencies',
isCompleted: true
}, {
id: "3",
title: 'develop amazing things',
isCompleted: false
}
]});
export default Todo;
app/adapters/application.js
import DS from 'ember-data';
export default DS.FixtureAdpater.extend();
app/routes/todos.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.all('todo');
}
});
app/router.js
import Ember from 'ember';
var Router = Ember.Router.extend({
location: TodosENV.locationType
});
Router.map(function() {
this.resource('todos', { path: '/' });
});
export default Router;
Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
app.import({
development: 'vendor/ember-data/ember-data.js',
production: 'vendor/ember-data/ember-data.prod.js'
}, {
'ember-data': [
'default'
]
});
module.exports = app.toTree();
I've been able to push fixture data into the views via the routes with,
this.store.push(todo: {some junk});
but can't figure out what I'm doing wrong in model files.
Any help would be greatly appreciated, Thanks.
This just a guess, but I'm wondering if you need to change this.store.all('todo'); to this.store.find('todo');. I'm pretty sure all() will only return records that are already loaded from the store.
I created model in models/application.js:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string')
});
And created adapter in adapters/application.js:
import Ember from "ember";
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
host: 'http://site.work/rest/v1/'
});
Route in routes/application.js:
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
return this.store.all('application');
});
Template in templates/application.hbs
{{#each item in model}}
<li>{{item.name}}</li>
{{/each}}
app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'chat', // TODO: loaded via config
Resolver: Resolver
});
loadInitializers(App, 'chat');
export default App;
router.js
import Ember from 'ember';
var Router = Ember.Router.extend({
location: ChatENV.locationType
});
Router.map(function() {
this.route("application");
});
export default Router;
JSON example from the server: {"application":[{"id":"1","name":"qwe"},{"id":"2","name":"qwe2"}]}
But my model is empty and I can't find any xhr requests in developer tool.
How should I use DS.RESTAdapter in Ember Cli?
Note: When I add this line into router it's works:
this.store.push('application',{'id':5, 'name':'Is this a question?'});
I'm not sure if the name of your model (application) is causing weird behaviour, since ember(-cli) also uses this name as root for things such as adapter, route, etc.
Apart from that, I would define my adapter as follows:
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'rest/v1'
});
and then start your server with:
ember server --proxy=http://site.work
I am trying to get my ember model to use a remote rails api. I've tried extending DS.RESTAdapter but I don't know how to tell the model to use those settings. My model never reaches out to localhost:3000.
//app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'friend-ember-app', // TODO: loaded via config
Resolver: Resolver
});
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: 'localhost:3000',
namespace: 'api/v1'
});
loadInitializers(App, 'friend-ember-app');
export default App;
//
//models/event.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string')
});
//
// controllers/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
columns: function(){
//Attempting to see request to remote api
var events = this.store.all('event');
debugger;
return [1,2,3,4];
}.property()
});
The adapter needs to be defined and exported in a separate file in adapters folder
In adapters/application.js
import DS from "ember-data";
var ApplicationAdapter = DS.RESTAdapter.extend({
host: 'localhost:3000',
namespace: 'api/v1'
});
export default ApplicationAdapter;