How to fetch i18next translations from REST endpoint? - javascript

We are using i18next in a react project to translate labels in our frontend. Currently the translations are placed in a public/locales/en/common.json file which is working fine.
We need to obtain the translations from a REST Api.
There's i18next-http-backend which seems to do what I'm looking for. I don't get it to work however.
The i18n initialization is done using appWithTranslation HOC and the config looks as following.
export default appWithTranslation(MyApp, {
i18n: {
locales: ['de', 'en'],
defaultLocale: 'en',
},
fallbackLng: {
default: ['en'],
},
nonExplicitSupportedLngs: true,
lowerCaseLng: true,
debug: true,
backend: {
loadPath: '/api/translations/{{lng}}/{{ns}}',
allowMultiLoading: false,
parse: (data: any) => {
console.log('parse is called')
return data
},
request: () => {
console.log('request');
},
},
use: [I18NextHttpBackend],
});
I expected this config to trigger a http request to the configured API but that's not happening. Neither console.log is being called.
Anyone with experience using i18next-http-backend?

Related

Permanent redirect for www to non-www site using NextJs

I've built a website with Nextjs (using version 12.1.4). For SEO purposes I would like to make a permanent redirect for my www version of the site to my non-www. Normally this could easily be done with nginx or an .htaccess file with apache. However, static websites hosted on Digitalocean are not running apache or nginx so an .htaccess file won’t do. I've read that this should be possible using Nextjs redirects.
I've tried the following 3 redirects:
redirects: async () => [
{
source: '/:path*',
has: [
{
type: 'host',
value: 'www',
},
],
destination: '/:path*',
permanent: true,
},
],
---------------------------------------------------
redirects: async () => [
{
source: '/:path*/',
has: [
{
type: 'host',
value: 'www',
},
],
destination: '/:path*/',
permanent: true,
},
],
------------------------------------------------------
redirects: async () => [
{
source: '/:path*',
has: [{ type: 'host', value: 'https://www.cvtips.nl/' }],
destination: 'https://cvtips.nl/:path*',
permanent: true,
},
],
All of them don't seem to redirect to the non-www version. I don't know if it is relevant, but I do use trailingSlash: true in the config.
Next thing I tried is adding a middleware file. I both tried adding it at the root and calling it middleware.js and inside the pages folder calling it _middleware.js.
This is the code I use for the redirect:
--> https://github.com/vercel/next.js/discussions/33554
import { NextRequest, NextResponse } from 'next/server';
export function middleware(req: NextRequest) {
const host = req.headers.get('host');
const wwwRegex = /^www\./;
// This redirect will only take effect on a production website (on a non-localhost domain)
if (wwwRegex.test(host) && !req.headers.get('host').includes('localhost')) {
const newHost = host.replace(wwwRegex, '');
return NextResponse.redirect(`https://${newHost}${req.nextUrl.pathname}`, 301);
}
return NextResponse.next();
}
Also does not work at all... Doesn't do anything I believe.
How can I redirect a Nextjs website from www to non-www?

Adding the proxy in vite takes me to that proxy url on my localhost. I only want to use it for api calls to backend

Here is my vite.config.ts:
import { defineConfig } from 'vitest/config'
import vue from '#vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '#quasar/vite-plugin'
const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
test: {
globals: true
},
plugins: [
vue({
template: {
transformAssetUrls
}
}),
quasar({
sassVariables: 'src/assets/scss/quasar-variables.sass'
})
],
resolve: {
alias: {
"#": path.resolve(__dirname, './src'),
},
},
server: {
proxy: {
'/socket': {
target: 'wss://abc-website.com:4221/',
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace('^/socket', ''),
},
'/streaming/': {
target: 'https://abc-website.com/',
changeOrigin: true,
},
'/': {
target: 'https://abc-website.com/',
changeOrigin: true,
secure: false,
ws: true
},
}
}
})
whenever my application is loaded it takes me to the https://abc-website.com while being on my locahost port.
I want to use above url for backend api calls only like https://abc-webite.com/api/auth.
Also i set the baseURL to "api/" after setting the proxy in vite.config.ts.
Also after the slight change it calls the REST api like https://localhost:3000/auth, i should rather be https://locahost:3000/api/auth
Vite proxy doesn't seems to work properly for me.
I think you could something like this:
server: {
proxy: {
// ... your other proxies
'/api': {
target: 'https://abc-website.com/',
changeOrigin: true,
secure: false,
ws: true,
rewrite: (path) => path.replace(/^\/app/, ''),
},
}
}
Then all your requests to sites like localhost:3000/api/my-endpoint should be proxied to https://abc-website.com/my-endpoint. You cannot proxy all "basic" requests, 'cause they are reserved for serving everything else, all the assets, index.html's and etc., but I'm also kind

How can I fake keycloack call to use in local development?

My company uses Keycloak for authentication connected with LDAP and returning a user object filled with corporative data.
Yet in this period we are all working from home and in my daily work having to authenticate in my corporative server every time I reload the app, has proven to be an expensive overhead. Especially with intermittent internet connections.
How can I fake the Keycloak call and make keycloak.protect() work as it has succeeded?
I can install a Keyclock server in my machine, but I'd rather not do that because it would be another server running in it besides, vagrant VM, Postgres server, be server, and all the other things I leave open.
It would be best to make a mock call and return a fixed hard-coded object.
My project's app-init.ts is this:
import { KeycloakService } from 'keycloak-angular';
import { KeycloakUser } from './shared/models/keycloakUser';
<...>
export function initializer(
keycloak: KeycloakService,
<...>
): () => Promise<any> {
return (): Promise<any> => {
return new Promise(async (res, rej) => {
<...>
await keycloak.init({
config: environment.keycloakConfig,
initOptions: {
onLoad: 'login-required',
// onLoad: 'check-sso',
checkLoginIframe: false
},
bearerExcludedUrls: [],
loadUserProfileAtStartUp: false
}).then((authenticated: boolean) => {
if (!authenticated) return;
keycloak.getKeycloakInstance()
.loadUserInfo()
.success(async (user: KeycloakUser) => {
// ...
// load authenticated user data
// ...
})
}).catch((err: any) => rej(err));
res();
});
};
I just need one fixed logged user. But it has to return some fixed customized data with it. Something like this:
{ username: '111111111-11', name: 'Whatever Something de Paula',
email: 'whatever#gmail.com', department: 'sales', employee_number: 7777777 }
EDIT
I tried to look at the idea of #BojanKogoj but AFAIU from Angular Interceptor page and other examples and tutorials, it has to be injected in a component. Keycloak initialization is called on app initialization, not in a component. Also Keycloak's return is not the direct return of init() method. It passes through other objects in the .getKeycloakInstance().loadUserInfo().success() sequence.
Or maybe it's just me that didn't fully understand it. If anyone can come with an example of an interceptor that can intercept the call and return the correct result, that could be a possibility.
Edit2
Just to complement that what I need is for the whole keycloak's system to work. Please notice that the (user: KeycloakUser) => { function is passed to success method of keycloak's internal system. As I said above, routes have a keycloak.protect() that must work. So it's not just a simple case of returning a promise with a user. The whole .getKeycloakInstance().loadUserInfo().success() chain has to be mocked. Or at least that's how I understand it.
I included an answer with the solution I made based on #yurzui's answer
Will wait a couple of days to award the bounty to see if someone can came up with an even better solution (which I doubt).
You can leverage Angular environment(or even process.env) variable to switch between real and mock implementations.
Here is a simple example of how to do that:
app-init.ts
...
import { environment } from '../environments/environment';
export function initializer(
keycloak: KeycloakService
): () => Promise<any> {
function authenticate() {
return keycloak
.init({
config: {} as any,
initOptions: {onLoad: 'login-required', checkLoginIframe: false},
bearerExcludedUrls: [],
loadUserProfileAtStartUp: false
})
.then(authenticated => {
return authenticated ? keycloak.getKeycloakInstance().loadUserInfo() : Promise.reject();
});
}
// we use 'any' here so you don't have to define keyCloakUser in each environment
const { keyCloakUser } = environment as any;
return () => {
return (keyCloakUser ? Promise.resolve(keyCloakUser) : authenticate()).then(user => {
// ...
// do whatever you want with user
// ...
});
};
}
environment.ts
export const environment = {
production: false,
keyCloakUser: {
username: '111111111-11',
name: 'Whatever Something de Paula',
email: 'whatever#gmail.com',
}
};
environment.prod.ts
export const environment = {
production: true,
};
Update
If you want to mock KeycloakService on client side then you can tell Angular dependency injection to handle that:
app.module.ts
import { environment } from '../environments/environment';
import { KeycloakService, KeycloakAngularModule } from 'keycloak-angular';
import { MockedKeycloakService } from './mocked-keycloak.service';
#NgModule({
...
imports: [
...
KeycloakAngularModule
],
providers: [
{
provide: KeycloakService,
useClass: environment.production ? KeycloakService : MockedKeycloakService
},
{
provide: APP_INITIALIZER,
useFactory: initializer,
multi: true,
deps: [KeycloakService]
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
mocked-keycloak.service.ts
import { Injectable} from '#angular/core';
import { KeycloakService } from 'keycloak-angular';
#Injectable()
class MockedKeycloakService extends KeycloakService {
init() {
return Promise.resolve(true);
}
getKeycloakInstance() {
return {
loadUserInfo: () => {
let callback;
Promise.resolve().then(() => {
callback({
userName: 'name'
});
});
return {
success: (fn) => callback = fn
};
}
} as any;
}
}
Although you explicitly state that you think that mocking is the best option, I suggest to reconsider it in favor of setting up local Keycloak instance using docker. It becomes easy when you provide a realm to bootstrap your environment. I've been using this approach with success for over 2 years of developing applications that work with Keycloak. This approach will let you "substitute calls to your corporate server" hence I post it here.
Assuming that you have docker & docker-compose installed, you'll need:
1. docker-compose.yaml
version: '3.7'
services:
keycloak:
image: jboss/keycloak:10.0.1
environment:
KEYCLOAK_USER: admin
KEYCLOAK_PASSWORD: admin
KEYCLOAK_IMPORT: /tmp/dev-realm.json
ports:
- 8080:8080
volumes:
- ./dev-realm.json:/tmp/dev-realm.json
2. dev-realm.json (exact content depend on required settings, this is the minimum that you've mentioned in your question)
{
"id": "dev",
"realm": "dev",
"enabled": true,
"clients": [
{
"clientId": "app",
"enabled": true,
"redirectUris": [
"*"
],
"bearerOnly": false,
"consentRequired": false,
"standardFlowEnabled": true,
"implicitFlowEnabled": false,
"directAccessGrantsEnabled": false,
"secret": "mysecret",
"publicClient": false,
"protocol": "openid-connect",
"fullScopeAllowed": false,
"protocolMappers": [
{
"name": "department",
"protocol": "openid-connect",
"protocolMapper": "oidc-usermodel-attribute-mapper",
"consentRequired": false,
"config": {
"user.attribute": "department",
"id.token.claim": "true",
"access.token.claim": "true",
"claim.name": "department",
"userinfo.token.claim": "true"
}
},
{
"name": "employee_number",
"protocol": "openid-connect",
"protocolMapper": "oidc-usermodel-attribute-mapper",
"consentRequired": false,
"config": {
"user.attribute": "employee_number",
"id.token.claim": "true",
"access.token.claim": "true",
"claim.name": "employee_number",
"userinfo.token.claim": "true"
}
}
]
}
],
"users": [
{
"username": "111111111-11",
"enabled": true,
"firstName": "Whatever Something de Paula",
"email": "whatever#gmail.com",
"credentials": [{
"type": "password",
"value": "demo"
}],
"attributes": {
"department": "sales",
"employee_number": 7777777
}
}
]
}
3. Create dedicated Angular environment that will use the "http://localhost:8080/auth" and realm "dev" for your local development
The advantages of this approach over mocking:
all OIDC and keycloak features are working. I admit that it depends if you need them but you are free to use realm/client roles, groups, 'real' OIDC flow with token refreshal. This gives you guarantee that your local setup will work also with corporate service
this setup can be stored in repository (contrary to manual setup of Keycloak server) and used both for working on web applications and backend services
By default, Keycloak uses a H2 in-memory database and needs about 600MB of RAM so I'd argue that it is a relatively low footprint.
Solution
I was able to mock Keycloak service using the method #yurzui suggested. I'll document it here as it may be useful for somebody.
Initially I had posted a solution where I conditionally exported the mock or real classes from the mock module. All worked well on dev mode, but when I tried to build the application for publishing in production server I got an error, so I had to return to the 2 class solution. I explain the problem in details this question .
This is the working code (so far).
Frontend:
With a little help from #kev's answer in this question and #yurzui (again :D) in this one, I created a MockKeycloakService class:
import { Injectable } from '#angular/core';
import { KeycloakService } from 'keycloak-angular';
import { environment } from '../../../environments/environment';
#Injectable({ providedIn: 'root' })
export default class MockKeycloakService {
init() {
console.log('[KEYCLOAK] Mocked Keycloak call');
return Promise.resolve(true);
}
getKeycloakInstance() {
return {
loadUserInfo: () => {
let callback : any;
Promise.resolve().then(() => {
callback({
username: '77363698953',
NOME: 'Nelson Teixeira',
FOTO: 'assets/usuarios/nelson.jpg',
LOTACAOCOMPLETA: 'DIOPE/SUPOP/OPSRL/OPSMC (local)',
});
});
return { success: fn=>callback = fn };
}
} as any;
}
login() {}
logout() {}
}
const KeycloakServiceImpl =
environment.production ? KeycloakService : MockKeycloakService
export { KeycloakServiceImpl, KeycloakService, MockKeycloakService };
then I substituted it in app.module:
<...>
import { KeycloakAngularModule } from 'keycloak-angular';
import { KeycloakServiceImpl } from 'src/app/shared/services/keycloak-mock.service';
import { initializer } from './app-init';
<...>
imports: [
KeycloakAngularModule,
<...>
],
providers: [
<...>,
{
provide: APP_INITIALIZER,
useFactory: initializer,
multi: true,
deps: [KeycloakServiceImpl, <...>]
},
<...>
],
bootstrap: [AppComponent]
})
export class AppModule { }
Then changed the type of keycloak service variable in app-init, that was the only change, but then I could remove KeycloackService import as it's being provided in app.module:
import { KeycloakUser } from './shared/models/keycloakUser';
<...>
export function initializer(
keycloakService: any,
<...>
): () => Promise<any> {
return (): Promise<any> => {
return new Promise(async (res, rej) => {
<...>
await keycloak.init({
config: environment.keycloakConfig,
initOptions: {
onLoad: 'login-required',
// onLoad: 'check-sso',
checkLoginIframe: false
},
bearerExcludedUrls: [],
loadUserProfileAtStartUp: false
}).then((authenticated: boolean) => {
if (!authenticated) return;
keycloak.getKeycloakInstance()
.loadUserInfo()
.success(async (user: KeycloakUser) => {
<...>
})
}).catch((err: any) => rej(err));
res();
});
};
But in the component I still have to check which environment I'm on and instance the class correctly:
<...>
import { MockKeycloakService } from '../../shared/services/keycloak.mock.service';
import { environment } from '../../../environments/environment';
<...>
export class MainComponent implements OnInit, OnDestroy {
<...>
keycloak: any;
constructor(
<...>
) {
this.keycloak = (environment.production) ? KeycloakServiceImpl : new KeycloakServiceImpl();
}
async doLogout() {
await this.keycloak.logout();
}
async doLogin() {
await this.keycloak.login();
}
<...>
}
Backend:
That was easier, again I created a KeycloakMock class:
import KeyCloack from 'keycloak-connect';
class KeycloakMock {
constructor(store, config) {
//ignore them
}
middleware() {
return (req, res, next) =>{
next();
}}
protect(req, res, next) {
return (req, res, next) =>{
next();
}}
}
const exportKeycloak =
(process.env.NODE_ENV == 'local') ? KeycloakMock : KeyCloack;
export default exportKeycloak;
Then I just substitued 'keycloak-connect' import on app.js by this class, and everythig worked fine. It connects to the real service if I set production = true and it mocks it with production = false.
Very cool solution. If anyone has anything to say on my implementation of #yurzui idea I'll like to hear from you.
Some notes:
I still couln't get rid of having to check the environment in the main-component class, as if I do this in the mock class module:
const KeycloakServiceImpl =
environment.production ? KeycloakService : new MockKeycloakService()
app.module doesn't work anymore. and if I do this in main-component:
constructor(
<...>
keycloakService: KeyclockServiceImpl;
) { }
The build fails with a "KeyclockServiceImpl refers to a value but is being used as a type here";
I had to export all classes or the build fails
export { KeycloakServiceImpl, KeycloakService, MockKeycloakService };

lowercase locale name (ja-jp) with i18next is not working, while ja-JP works

I am using i18next with aurelia using the i18next aurelia plugin.
The problem I am facing is in locale case sensitivity.
When I set my url to http://localhost/ja-JP
everything works fine, but changing the url to http://localhost/ja-jp throws this error
Possible Unhandled Promise Rejection: ["failed loading locales/ja-JP/translation.json"]
I thought that i18next is by default looking into case sensitive directory, so I tried keeping two directories ja-JP and ja-jp too, but still same problem.
Any idea why would it be a problem?
http://localhost/ja/ and http://localhost/en both work perfectly fine though
if it is relevant, here is the webpack conf section
"aurelia-i18n": [
{ name: "locales/ja-jp/translation.json" },
{ name: "locales/en-us/translation.json" }
]
and the aurelia configuration for i18next
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-validation'))
.plugin(PLATFORM.moduleName('au-table'))
.plugin(PLATFORM.moduleName("aurelia-i18n"), (instance) => {
let aliases = ["t", "i18n"];
TCustomAttribute.configureAliases(aliases);
instance.i18next.use(Backend.with(aurelia.loader));
return instance.setup({
backend: {
loadPath: "./locales/{{lng}}/{{ns}}.json"
},
attributes: aliases,
lng: "en-us",
fallbackLng: "en-us",
load: "currentOnly",
debug: false
});
})
.feature(PLATFORM.moduleName('resources/index'))
.developmentLogging(environment.debug ? 'debug' : 'warn');
if (environment.testing) {
aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'))
}
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}
There is lowerCaseLng Option that will help you.
https://www.i18next.com/overview/configuration-options
i18next
.init({
...
lowerCaseLng: true
});

Defining Auth strategy using Glue

I am using glue to spin up the hapi server so I gave the json object with connection and registration details.
I have 10 routes and i need to use authentication strategy for all the 10 routes, So followed the below steps
1) I have registered the xyz custom auth plugin
2) Defined the strategy server.auth.strategy('xyz', 'xyz', { });
3) At every route level I am enabling auth strategy
auth: {
strategies: ['xyz'],
}
How can I give below line to glue configuration object itself.
server.auth.strategy('xyz', 'xyz', { });
Glue.compose(ServerConfig, { relativeTo: baseDir }, (err, server) => {
internals.server = server;
})
One more question here is, in this line server.auth.strategy('xyz', 'xyz', { from json file}); I am reading the JSON data from a config file. When I change the data in this JSON file I dont want to restart the server manually to load the modified data. Is there any plugin or custom code to achieve this?
I figured out a general workaround for when you want to do setup that Glue does not directly support (AFAIK) and you also don't want to keep adding to index.js.
Create a plugins folder where your manifest.js is located.
Create a file plugins/auth.js (in this case). Here you will have a register callback with access to the server object and you can make setup calls that go beyond what Glue does declaratively.
Add a plugin item to manifest.js pointing to your plugin file.
in manifest.js:
register: {
plugins: [
{
plugin: './plugins/auth',
},
]
}
in plugins/auth.js:
module.exports = {
name: 'auth',
async register (server) {
await server.register([
require('#hapi/cookie'),
]);
server.auth.strategy('session', 'cookie', {
cookie: {
name: 'sid-example',
password: '!wsYhFA*C2U6nz=Bu^%A#^F#SF3&kSR6',
isSecure: false
},
redirectTo: '/login',
validateFunc: async (request, session) => {
const account = await users.find(
(user) => (user.id === session.id)
);
if (!account) {
return { valid: false };
}
return { valid: true, credentials: account };
}
});
server.auth.default('session');
},
};
(auth setup code is from the Hapi docs at enter link description here)
This is the way I have found where I can call things like server.auth.strategy() sort-of from manifest.js.
Note: Auth is not a great example for this technique as there is a special folder for auth strategies in lib/auth/strategies.

Categories