I have a view that can be accessed by a direct link from an email.
Ex.
http://myServer:7747/#/pics/ClientId/YYYY-MM-DD
So this is set up using a route:
{ route: ['/pics', '/pics/:clientId/:sessionDate', 'pics'],
name: 'pics', moduleId: './views/pics', nav: false, title: 'Pictures',
auth: true, activationStrategy: activationStrategy.invokeLifecycle
},
So if a client clicks on this link and is not logged in, I want the view to redirect to a login screen (I am using aurelia-authentication plugin) and then when it succeeds, I want it to return to this page using the same urlParams.
I have the redirect to the login page working, but getting back to this view is proving difficult. If I just try to use history.back() the problem is that the authentication plugin has pushed another navigationInstruction (loginRedirect) onto the history before I can do anything. If I just try to hard-code a 'go back twice' navigation I run into a problem when a user simply tries to log in fresh from the main page and there is no history.
Seems like this should be easier than it is, what am I doing wrong?
I haven't used the aurelia-authentication plugin, but I can help with a basic technique you can use that makes this very easy. In your main.js file, set the root of your app to a "login" component. Within the login component, when the user has successfully authenticated, set the root of your app to a "shell" component (or any component you choose) that has a router view and configure the router in its view-model. Once this happens, the router will take the user to the proper component based on the url. If the user logs out, just set the app root back to the "login" component.
Here's some cursory code to attempt to convey the idea. I assume you're using the SpoonX plugin, but that's not really necessary. Just as long as you reset the root of your app when the user authenticates, it will work.
In main.js
.....
aurelia.start().then(() => aurelia.setRoot('login'));
.....
In login.js
import {AuthService} from 'aurelia-authentication';
import {Aurelia, inject} from 'aurelia-framework';
#inject(AuthService, Aurelia)
export class Login {
constructor(authService, aurelia) {
this.authService = authService;
this.aurelia = aurelia;
}
login(credentialsObject) {
return this.authService.login(credentialsObject)
.then(() => {
this.authenticated = this.authService.authenticated;
if (this.authenticated) {
this.aurelia.setRoot('shell');
}
});
}
.....
}
In shell.html
.....
<router-view></router-view>
.....
In shell.js
.....
configureRouter(config, router) {
this.router = router;
config.map(YOUR ROUTES HERE);
}
.....
I got this to work by replacing the plugin's authenticateStep with my own:
import { inject } from 'aurelia-dependency-injection';
import { Redirect } from 'aurelia-router';
import { AuthService } from "aurelia-authentication";
import { StateStore } from "./StateStore";
#inject(AuthService, StateStore)
export class SaveNavStep {
authService: AuthService;
commonState: StateStore;
constructor(authService: AuthService, commonState: StateStore) {
this.authService = authService;
this.commonState = commonState;
}
run(routingContext, next) {
const isLoggedIn = this.authService.authenticated;
const loginRoute = this.authService.config.loginRoute;
if (routingContext.getAllInstructions().some(route => route.config.auth === true)) {
if (!isLoggedIn) {
this.commonState.postLoginNavInstr = routingContext;
return next.cancel(new Redirect(loginRoute));
}
} else if (isLoggedIn && routingContext.getAllInstructions().some(route => route.fragment === loginRoute)) {
return next.cancel(new Redirect(this.authService.config.loginRedirect));
}
return next();
}
}
The only difference between mine and the stock one is that I inject a 'StateStore' object where I save the NavigationInstruction that requires authentication.
Then in my login viewModel, I inject this same StateStore (singleton) object and do something like this to log in:
login() {
var redirectUri = '#/defaultRedirectUri';
if (this.commonState.postLoginNavInstr) {
redirectUri = this.routing.router.generate(this.commonState.postLoginNavInstr.config.name,
this.commonState.postLoginNavInstr.params,
{ replace: true });
}
var credentials = {
username: this.userName,
password: this.password,
grant_type: "password"
};
this.routing.auth.login(credentials,
{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } },
redirectUri
).catch(e => {
this.dialogService.open({
viewModel: InfoDialog,
model: ExceptionHelpers.exceptionToString(e)
});
});
};
Hope this helps someone!
Related
I'm using express + passport + nextjs to set up an app that will perform authentication using OpenID Connect. The user data is stored on the request object using express-session which gives me req.user on every request as usual.
Now I want to pass the user information to the front-end so that I can use it for something, but there does not seem to be any consistent way to do this for all requests. I can use getServerSideProps for individual pages, but not for every page through either _document or _app. How can I set this up?
Here is my current _document.tsx
import Document, {
Head,
Main,
NextScript,
DocumentContext,
} from "next/document"
export default class Doc extends Document {
public static async getInitialProps(ctx: DocumentContext) {
const req: any = ctx.req
console.log("req/user", `${!!req}/${!!(req && req.user)}`)
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
user: req?.user || "no user",
}
}
public render() {
return (
<html>
<Head />
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
It appears to return a request object only during the very first request, not any subsequent refreshes of the page.
I've created a small repo that reproduces the issue here: https://github.com/rudfoss/next-server-custom-req
It seems ridiculous that there is no way to do this for all pages in an easy manner.
Edit: For reference this is my server.js. It is the only other relevant file in the repo
const express = require("express")
const next = require("next")
const dev = process.env.NODE_ENV !== "production"
const start = async () => {
console.log("booting...")
const server = express()
const app = next({ dev, dir: __dirname })
const handle = app.getRequestHandler()
await app.prepare()
server.use((req, res, next) => {
req.user = {
authenticated: false,
name: "John Doe",
}
next()
})
server.get("*", handle)
server.listen(3000, (err) => {
if (err) {
console.error(err)
process.exit(1)
}
console.log("ready")
})
}
start().catch((error) => {
console.error(error)
process.exit(1)
})
It is recommended to do this via function components, as seen in the Next.js custom App docs:
// /pages/_app.tsx
import App, { AppProps, AppContext } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
MyApp.getInitialProps = async (appContext: AppContext) => {
// calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(appContext)
const req = appContext.ctx.req
return {
pageProps: {
...appProps.pageProps,
user: req?.user,
},
}
}
As in your answer, this will run on every request though so automatic static optimization will not be active.
Try a demo of changing pageProps in MyApp.getInitialProps (without usage of req.user) on the following CodeSandbox:
https://codesandbox.io/s/competent-thompson-l9r1u?file=/pages/_app.js
Turns out I can override getInitialProps on _app to make this work:
class MyApp extends App {
public static async getInitialProps({
ctx
}: AppContext): Promise<AppInitialProps> {
const req: any = ctx.req
return {
pageProps: {
user: req?.user
}
}
}
public render() {
//...
}
}
This will run on every request though so static optimization will not work, but in my case I need the information so I'm willing to accept the trade-off.
Edit: This answer also works, but it uses the "old" class-based component syntax which is no longer recommended. See answer from Karl for a more modern version using functional-component syntax.
I also had the similar problem where I had to fetch loggedIn user details from my Auth api. I solved it by wrapping my whole app inside a context provider, then using a set function for the initialState, which will remember if it was called before and fetch user details only once. Then in my each page, wherever I require these user details, I used the context to see if details are available and call the set function if details are not available. This way I think I achieved:
Only one request to fetch user details
Because it happens from the client side, TTFB is better
I can still take advantage of getStaticProps and getServerSideProps where it is required.
The route I want to protect: /account
If the user is NOT authenticated, then redirect to /signIn
Having an SSR NextJS project, and working with Firebase authentication, how can I achieve a production battle-tested proper protected routes?
The example provided on NextJS docs is not working right now:
with-firebase-auth
So I submitted an issue:
with-firebase-auth-example-not-working
Add to that that I'm new to NextJs and also, unfortunately, I've never used JWT :( or any sort of backend protected routes cookies/JWT/sessions implementation....Until now that I want/need it.
What sort of workaround I've tried, well, something like this:
import Account from "./Account.js";
import Loading from "./Loading.js";
import { useRequireAuth } from "./use-require-auth.js";
function Account(props) {
const auth = useRequireAuth();
// If auth is null (still fetching data)
// or false (logged out, above hook will redirect)
// then show loading indicator.
if (!auth) {
return <Loading />;
}
return (
<Account auth={auth} />
);
}
// Hook (use-require-auth.js)
import { useEffect } from "react";
import { useAuth } from "./use-auth.js";
import { useRouter } from "./use-router.js";
function useRequireAuth(redirectUrl = '/sigIn'){
const auth = useAuth();
const router = useRouter();
// If auth.user is false that means we're not
// logged in and should redirect.
useEffect(() => {
if (auth.user === false){
router.push(redirectUrl);
}
}, [auth, router]);
return auth;
}
But this is all happening on the client-side....the server is not checking anything.
I'm gonna a post a very basic answer to this. I dunno how you're going to check if a user is authenticated on firebase. My own code uses AWS Cognito for this purpose.
We' are going to put that piece of code at the end of the page. By doing so, if the user is not authenticated we will redirect the user to the sign in page.
export async function isAuthenticated(context) {
// your code to check firebase authentication
// return true if not authenticated, else return false
// Maybe this way
var user = firebase.auth().currentUser;
if (user)
return false;
else
return true;
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
let shouldRedirect = await isAuthenticated(ctx);
if (shouldRedirect) {
return {
redirect: {
destination: '/sign-in',
permanent: false
}
}
}
return {
props: {}
}
}
export default Account;
That's it. Now the route is protected through SSR.
I am trying to access user data after succesfull login and also from every component.This is how i login the user:
router.post("/user/login",(req,res,next)=>{
passport.authenticate('local', function(err, user, info) {
console.log(JSON.stringify(user)) // here i got user data
if (err) { return next(err); }
if (!user) { return res.send("fail"); }
req.logIn(user, function(err) {
if (err) { return next(err); }
return res.send("success") // when client gets success message,it will do Router.push("/dashboard")
});
})(req, res, next);
})
Server configuration:
server.use(cookieParser())
server.use(bodyParser.json())
server.use(passport.initialize());
server.use(session({
secret: 'jumpingdonger',
resave: true,
saveUninitialized: true,
cookie : { secure : false, maxAge : (4 * 60 * 60 * 1000) }, // 4 hours
}))
//Passport Middleware
server.use(passport.initialize())
server.use(passport.session())
DashBoard page:
import Header from '../components/Header'
import Layout from '../components/MyLayout.js'
import React, { Component } from 'react';
import axios from 'axios';
import Router from 'next/router'
export default class DashBoard extends Component{
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount(){
console.log(this.props)
}
logout =()=>{
axios.get('/api/user/logout').then((result)=>{
if(result.data=="success"){
Router.push("/")
}
})
}
render(){
if(this.props.userData == undefined){
return(
<Layout>
<p>First you must login!</p>
</Layout>
)
}else{
return(
<Layout>
<p>Welcome to your dashboard {this.props.userData.userName}</p>
<a onClick={this.logout}>logout</a>
</Layout>
)
}
}
}
DashBoard.getInitialProps = async function(context) {
if(context.req !=undefined){ // which means that we are from server
return {
userData:context.req.user
};
}else{
return{}
}
}
So after succesfull login,i am redirected to dashboard page.Now in dashboard component i am trying to get userdata on getInitialProps.The problem is since i am redirected by client using Router.push(),i cant get data on getInitialProps unless i dont refresh the page from browser.If i refresh,context.req.user is populated by user data.So how do i access userdata with client side routing from dashboard page and also every other page ? What i couldnt understand is, is this puting user data into a cookie which i can access from client or is this a server side session ?
thanks
EDIT:
I solved the problem by transfering userData from server to client on succesfull login and seting a cookie in client side.I wonder is this a correct solution in this case ?
If user is logged in. passport will create user object in req for every request in express.
if (req.user) {
// logged in
} else {
// not logged in
}
In next.js when you use getInitialProps you have access to server with context.req.
like this:
static async getInitialProps({req}){
if(req){
// called on server
// here you can check for that user object
} else {
// called on client
}
}
However this cod will work if you have a SSR request in your next.js app (refresh page or put url and press enter).
You authenticate in server, so there is no way to find out if you have the same in front-end, Unless you use the token and verify the token in front-end as well.
Have a look at Express session which will help you with cookies.
You will need to use a redux store to solve this problem. If you have set up your redux store, you need to hydrate that into your redux store.
In your _app.js file add this code. Your pages can connect to the store.
componentDidMount () {
const { pageProps: { user }, reduxStore: { dispatch } } = this.props
if (user) {
dispatch({
type: FETCH_USER,
payload: user
})
}
}
We are developing a component that handles OpenID Connect's implicit flow.
In step 5 of the flow, the "Authorization Server sends the End-User back to the Client with an ID Token and, if requested, an Access Token." We would like our component to handle that request, which will be to ~/openid-login.
How do we configure Aurelia to have it route to a function in our component?
export class OpenId {
// how do we route ~/openid-login to this?
public handleRequest() {
}
}
Note: Here is the work in progress.
Using a navStrategy within your routeConfig will allow you to do what ever you like before navigating to a page. See below:
import { autoinject } from 'aurelia-framework';
import { RouterConfiguration, Router, NavigationInstruction } from 'aurelia-router';
#autoinject
export class App {
router: Router;
configureRouter(config: RouterConfiguration, router: Router) {
let openIdNavStrat = (instruction: NavigationInstruction) => {
console.log('Do whatever we would like to do.');
// then redirect to where ever you would like.
instruction.config.moduleId = 'login';
}
config.map([
{ route: ['', 'login'], moduleId: 'login' },
{ route: 'openid-login', navigationStrategy: openIdNavStrat },
]);
this.router = router;
}
}
There is documentation on Navigation Strategies here: http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/3
I am trying to configure a basic ember-cli app using authentication via ember-cli-simple-auth and want to have a dedicated 'guest' login page and a different 'admin' login page (authorizing to different serverTokenEnpoint's).
I have the 'guest' page working, i.e. if a user tries to browse to a protected route (page) then they are redirected to the default /login route and can login Ok.
What I can't figure out is how to have a user that browse's to /admin/xyz route that they then get redirected (using to /admin/login which in turn will authenticate to a different serverTokenEnpoint to the default.
Can anyone point me in the right direction to achieve the above?
Thanks.
an example protected 'guest' route file looks like:
FILE: /app/routes/protected.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin);
And the environment configs contain:
FILE: /app/config/environment.js
ENV['simple-auth'] = {
authorizer: 'simple-auth-authorizer:oauth2-bearer',
store: 'simple-auth-session-store:local-storage',
crossOriginWhitelist: ['http://www.domain.com/token',
'http://www.domain.com'
]
};
I even tried to override the default authenticationRoute in my /app/routes/admin.js file like below but did not work:
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin,{
authenticationRoute: 'admin.login'
});
So to simplify the process following Marco's suggestion I now have:
Note: AT the moment this does not work.. #marcoow do you have any thoughts where im going wrong?
This is using ember-cli with the follow firebug output:
AuthenticatorBase A (unknown mixin) ***<- IS this expected????***
CustomAuthenticator B (unknown mixin)
DEBUG: -------------------------------
DEBUG: Ember : 1.7.0
DEBUG: Ember Data : 1.0.0-beta.9
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 1.11.1
DEBUG: Ember Simple Auth : 0.6.4
DEBUG: Ember Simple Auth OAuth 2.0 : 0.6.4
DEBUG: -------------------------------
and if I put my manual override code back in see previous answer it will work, but since I want to use the same oauth2 authentication just to a different URL, I like the idea of just being able to override the TokenEndpoint with a custom authenticator.
file: app/initializers/simple-auth-admin.js
import AuthenticatorBase from 'simple-auth-oauth2/authenticators/oauth2';
var CustomAuthenticator = AuthenticatorBase.extend({
serverTokenEndpoint: AppchatENV['simple-auth-admin'].serverTokenEndpoint,
serverTokenRevokationEndpoint: AppchatENV['simple-auth-admin'].serverRevokationTokenEndpoint,
refreshAccessTokens: AppchatENV['simple-auth-admin'].refreshAccessTokens
});
console.log("AuthenticatorBase A ",AuthenticatorBase);
console.log("CustomAuthenticator B ",CustomAuthenticator);
export default {
name: 'simple-auth-admin',
before: 'simple-auth',
initialize: function(container) {
container.register('simple-auth-authenticator:admin', CustomAuthenticator);
}
};
But the above shows an error of "AuthenticatorBase A (unknown mixin)"
and then in
file: app/controllers/admin/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'simple-auth-authenticator:admin'
}
and for the configs...
file: config/environment.js
ENV['simple-auth-admin'] = {
serverTokenEndpoint: "http://www.domain.com/admintoken",
serverTokenRevokationEndpoint: "http://www.domain.com/admintoken/revoke",
refreshAccessTokens: true
};
EDIT:
so by setting: in file: app/initializers/simple-auth-admin.js
import AuthenticatorBase from 'simple-auth-oauth2/authenticators/oauth2';
var CustomAuthenticator = AuthenticatorBase.extend({
serverTokenEndpoint: MyappENV['simple-auth-admin'].serverTokenEndpoint,
serverTokenRevokationEndpoint: MyappENV['simple-auth-admin'].serverRevokationTokenEndpoint,
refreshAccessTokens: MyappENV['simple-auth-admin'].refreshAccessTokens
});
console.log("AuthenticatorBase.serverTokenEndpoint =",AuthenticatorBase.serverTokenEndpoint);
console.log("CustomAuthenticator.serverTokenEndpoint =",CustomAuthenticator.serverTokenEndpoint);
console.log("MyappENV['simple-auth-admin'].serverTokenEndpoint = ",MyappENV['simple-auth-admin'].serverTokenEndpoint);
export default {
name: 'simple-auth-admin',
before: 'simple-auth',
initialize: function(container) {
container.register('simple-auth-authenticator:admin', CustomAuthenticator);
console.log("[at container.register] CustomAuthenticator.serverTokenEndpoint = ",CustomAuthenticator.create().get('serverTokenEndpoint'));
}
};
I get output of:
AuthenticatorBase.serverTokenEndpoint = undefined
CustomAuthenticator.serverTokenEndpoint = undefined
MyappENV['simple-auth-admin'].serverTokenEndpoint = http://www.domain.com/oauth2/admintoken
[at container.register] CustomAuthenticator.serverTokenEndpoint = http://www.domain.com/oauth2/admintoken
Am I misuderstanding what AuthenticatorBase.extend () is doing? I thought it would allow you to override some variables or functions?
EDIT 2:
file: app/controllers/admin/login.js
import Ember from 'ember';
var $ = Ember.$;
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'simple-auth-authenticator:admin',
init: function(){
console.log('INIT LOGIN CONTROLLER', this.get('session'));
this._super();
},
actions: {
authenticate: function() { // (data)
console.log("LoginController clicked");
$('#nameBtn').ladda().ladda('start');
console.log(this.get('session'));
console.log('this.authenticator = ', this.authenticator);
var _this = this;
this._super().then(null, function(data) {
console.log('LOGIN GOT BACK: ', data);
$('#nameBtn').ladda().ladda('stop');
if(data.error !== undefined && data.error !== "") {
_this.set('data', {error: data.error});
}
});
}
}
});
This results in an ajax to www.domain.com/token rather than the expected www.domain.com/admintoken
OK, after a lot of coding in circles and trial and error and with a lot of help from:
https://github.com/simplabs/ember-simple-auth/blob/master/examples/6-custom-server.html
this is how I achieved what I wanted...
1) Setup the enpoints as variables in the environment file (simple-auth-admin is the name i chose for my admin authenticator)
File: /app/config/environment.js
ENV['simple-auth-admin'] = {
serverTokenEndpoint: "http://www.domain.com/admintoken",
serverTokenRevokationEndpoint: "http://www.domain.com/admintoken/revoke",
refreshAccessTokens: true
};
2) Create the actual authenticator as an override in an initialiser Note: in this case the CustomAuthorizer is not actually used and make sure you replace AppNameENV with your app name, so if your app was called bob it would be BobENV.
File: /app/initializers/simple-auth-admin.js
import Ember from 'ember';
import AuthenticatorBase from 'simple-auth/authenticators/base';
import AuthorizerBase from 'simple-auth/authorizers/base';
var CustomAuthorizer = AuthorizerBase.extend({
authorize: function(jqXHR, requestOptions) {
if (this.get('session.isAuthenticated') && !Ember.isEmpty(this.get('session.token'))) {
jqXHR.setRequestHeader('Authorization', 'Token: ' + this.get('session.token'));
}
}
});
var CustomAuthenticator = AuthenticatorBase.extend({
tokenEndpoint: window.AppNameENV['simple-auth-admin'].serverTokenEndpoint,
tokenRevokationEndpoint: window.AppNameENV['simple-auth-admin'].serverRevokationTokenEndpoint,
refreshAccessTokens: window.AppNameENV['simple-auth-admin'].refreshAccessTokens,
init: function(){
console.log("CUSOTMM AUTH INIT ",window.AppNameENV['simple-auth-admin'].serverTokenEndpoint);
this._super();
},
restore: function(data) {
console.log('AdminAuth - restore');
return new Ember.RSVP.Promise(function(resolve, reject) {
if (!Ember.isEmpty(data.token)) {
resolve(data);
} else {
reject();
}
});
},
authenticate: function(credentials) {
console.log('AdminAuth - authenticate',credentials);
var _this = this;
return new Ember.RSVP.Promise(function(resolve, reject) {
Ember.$.ajax({
url: _this.tokenEndpoint,
type: 'POST',
data: JSON.stringify({ grant_type: 'password', username: credentials.identification, password: credentials.password, session: { identification: credentials.identification, password: credentials.password } }),
contentType: 'application/json'
}).then(function(response) {
Ember.run(function() {
resolve({ token: response.access_token });
});
}, function(xhr, status, error) {
var response = JSON.parse(xhr.responseText);
Ember.run(function() {
reject(response.error);
});
});
});
},
invalidate: function() {
console.log('AdminAuth - invalidate');
var _this = this;
return new Ember.RSVP.Promise(function(resolve) {
Ember.$.ajax({ url: _this.tokenEndpoint, type: 'DELETE' }).always(function() {
resolve();
})
});
}
});
export default {
name: 'simple-auth-admin',
before: 'simple-auth',
initialize: function(container) {
console.log("OVERRIDES : ", window.AppNameENV['simple-auth-admin']);
container.register('simple-auth-authenticator:admin', CustomAuthenticator);
container.register('simple-auth-authorizer:admin', CustomAuthorizer);
}
};
3) The I setup a redirect route to admin/login for any protected pages ( this example is for /admin/dashboard)
File: /app/routes/admin/dashboard.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin,{
authenticationRoute: 'admin.login',
actions: {
authenticateSession: function() {
this.transitionTo(this.authenticationRoute);
}
}
});
4) Then configure the admin controller to use the new custom authenticator
File: /app/controllers/admin/login.js
import Ember from 'ember';
var $ = Ember.$;
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
//import Session from 'simple-auth/session';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'simple-auth-authenticator:admin',
});
All of which seems a bit heavy handed when all i really wanted to do was have the authentication for the /admin/login point to a different serverendpoint. Marco, is there a way of overriding just those variables and therefore extend the simple-auth-oauth2 authorizer?
The routes you're defining are necessary of course.
Since your authorizer and authenticator for the admin area seem to be customized as well those are necessary as well of course. If you used the plain OAuth 2.0 ones for the admin area as well you could drop the authorizer and change the authenticator to
import AuthenticatorBase from 'simple-auth-oauth2/authenticators/oauth2';
var CustomAuthenticator = AuthenticatorBase.extend({
serverTokenEndpoint: 'http://www.domain.com/admintoken',
serverTokenRevokationEndpoint: 'http://www.domain.com/admintoken/revoke'
});
Every time Ember Simple Auth enforces authentication (usually when a user accesses an authenticated route while the session is not authenticated), it calls the ApplicationRouteMixin's authenticateSession action. The best option you have is to override that and somehow decide whether to transition to the admin or the guest login page from there. If you have e.g. your admin pages namespaces in an /admin route, you could also override the authenticateSession on the AdminRoute and transition to the admin login page from there while the default implementation in the ApplicationRoute transitions to the guest login page.
For the authenticators it's probably best to use the default OAuth 2.0 authenticator with its serverTokenEndpoint to authenticate guests and extend another authenticator from that that authenticates admin against a different serverTokenEndpoint.